Objects are not valid as a React child

React Native

React Native Problem Overview


I am getting an below error. I can see that I have to return array instead of object. But I am really not sure how to fix it. Thanks in advance

> Objects are not valid as a React child. If you meant to render a > collection of children, use an array instead or wrap the object using > createFragment(object) from the React add-ons. Check the render method > of View.

constructor(props){
    super(props);
    this.state = {timeElapsed: null};
  }

startStopButton(){
    return <TouchableHighlight underlayColor="gray" onPress={this.handleStartPress.bind(this)}>
        <Text>Start</Text>
      </TouchableHighlight>
  }

handleStartPress(){
      var startTime = new Date();
      



      setInterval(()=>{
        this.setState({timeElapsed: new Date()})
      }, 1000);
  }
render(){
return(
  <View style={styles.container}>
    <View style={[styles.header]}>
      <View style={[styles.timerContainer, this.borderColor('#ff6666')]}>
        {this.state.timeElapsed}
      </View>
      <View style={[styles.buttonsContainer, this.borderColor('#558000')]}>
        {this.startStopButton()}
        {this.lapButton()}
      </View>
    </View>
  </View>
);


}

React Native Solutions


Solution 1 - React Native

timeElapsed is an object, React doesn't know how to render this:

  <View style={[styles.timerContainer, this.borderColor('#ff6666')]}>
    {this.state.timeElapsed}
  </View>

Try changing this.state.timeElapsed for a string like for example:

  <View style={[styles.timerContainer, this.borderColor('#ff6666')]}>
    {this.state.timeElapsed.toString()}
  </View>

Solution 2 - React Native

<Note note={
 <p>{(new Date(updated_at)).toString()}</p>
} />

In this case, Note is my child component and I had passed date as above and it worked for me.

Output Pass date to React Child

Solution 3 - React Native

  • Short & simple is that use JSON.stringify()

  • because this.state.timeElapsed is the object. object not able to print in normal standered. Thus we need to render that object in JSON.stringify(). It converted into JSON form.

  • Try this, It's work for me

{JSON.stringify(this.state.timeElapsed)}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMesmerize86View Question on Stackoverflow
Solution 1 - React NativeEmilio RodriguezView Answer on Stackoverflow
Solution 2 - React NativeManindra GautamView Answer on Stackoverflow
Solution 3 - React NativeAshish SondagarView Answer on Stackoverflow