CODEWITHSUNDEEP
javascriptreactjsreact-nativeecmascript-6
FabianoLothor
FabianoLothor

Reputation: 2967

REACT - Error to render component

I have the code below and it not work

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default class Splash extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.chars}>
          <SeparateText value='AFEW' />
        </View>
      </View>
    );
  }
}

class SeparateText extends Component {
  render() {
    return ({
      this.props.value.split('')
        .map(char => <Text>{char}</Text>)
    });
  }
}

In execution, the server shows the error below:

enter image description here

My final objective is do somethink like this:

enter image description here

And I do it! Using the code below I do what I am trying do, but I need some code to show that screen using map and react. I try from many forms, but unsucessfull.

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default class Splash extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.splashChars}>
          <SplashChar value='A' />
          <SplashChar value='F' />
          <SplashChar value='E' />
          <SplashChar value='W' />
        </View>
        <View style={styles.splashText}>
          <Text></Text>
        </View>
      </View>
    );
  }
}

class SplashChar extends Component {
  render() {
    return (
      <Text style={styles.splashChar}>{this.props.value}</Text>
    );
  }
}

Upvotes: 0

Views: 48

Answers (2)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

You are missing to enclose the JSX inside of the View.

class SeparateText extends Component {
  render() {
    return (
      <View>
        {this
          .props
          .value
          .split('')
          .map(char => <Text>{char}</Text>)
        }
      </View>
    )
  }
}

Upvotes: 2

Striped
Striped

Reputation: 2548

You need a root enclose tag.

return (
   <View>{this.props.value.split('').map(char => <Text>{char}</Text>)</View>
);

Upvotes: 2

Related Questions