Home/ Questions/How to deal with the functions are not valid as a react child errors?
Next
Answered
August O'Brien
  • 31
Asked: 2022-05-18T19:17:30+00:00 In:

How to deal with the functions are not valid as a react child errors?

  • 31

. Advertisement .

..3..

. Advertisement .

..4..

I am trying to write a javascript that returns an invalid answer. I don’t know where the incorrect command is in the “functions are not valid as a react child.”

My detail is:

renderAlbums() {
  return this.state.albums.map(album => <Text>{ album.title }</Text>);
  }
 
  render() {
  return (
  <View>
  { this.renderAlbums }
  </View>
  );
  }
render() {
  const c=this.state.albums.map(album => <Text>{ album.title }</Text>);
  return (
  <View>
  { c }
  </View>
  );
 }

and I end up with the warning message:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render

Pls, suggest the best answer to fix it.

react-native
Share

2 Answers

  1. Best Answer
    Expert

    The cause: The cause is that React expects React Elements to render it.

    this.renderAlbums is a function reference in the current script that does not return any React Element. Because of not the react element, but the function itself. As a result, React is unable to render this.renderAlbums.

    The solution: You should change this code

    <View>
   { this.renderAlbums }
</View>

    To:

    <View>
   { this.renderAlbums() } //it will return react element which can be rendered.
</View>
    • 0

  2. this.renderAlbums refers only to the function, this.renderAlbums() executes it and represents its return value.

    • 23

Leave an answer

You must login to add an answer.

Need An Account,