Objects are not valid as a React child
React NativeReact 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 inJSON.stringify()
. It converted into JSON form. -
Try this, It's work for me
{JSON.stringify(this.state.timeElapsed)}