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>
);
}
3 Answers
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>
<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
- Short & simple is that use
JSON.stringify() because
this.state.timeElapsedis 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)}
