How to render components using function in React Native

Question

Hi i'm new to React native and trying render components by calling a function inside render but it doesn't seem to work.

my function:

renderData = () => {
    this.state.data.map(x => {
      return (
         <View>
           <Text> {x.data.title} </Text>
         </View>
       )
    });
  };

Works if i do this:

  render() {

    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Enter Username</Text>
        {this.state.data.map(x => {
          return <Text style={styles.bodyText}> {x.data.title} </Text>;
        })}
      </SafeAreaView>
    );
  }
}

But not this:

  render() {

    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Enter Username</Text>
        {this.renderData()}
      </SafeAreaView>
    );
   }
  }

I'm lost as to why it doesn't work with the second code

Andrew Li · Accepted Answer · 2018-07-17 00:38:50Z

2

That's because you aren't returning anything from renderData to actually render. Add a return statement:

return this.state.data.map(x => {
  return (
     <View>
       <Text> {x.data.title} </Text>
     </View>
   )
});

You actually have to return the new mapped elements so that when you call it in {this.renderData()} you get the new elements. Or else you're doing {undefined} since you currently have no return value.

answered Jul 17, 2018 at 0:38

Andrew Li

58.1k14 gold badges135 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render components using function in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related