Menu
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>
);
}
323
If you meant to render a collection of children, use an array instead' Error. We can fix the 'Objects are not valid as a React child. If you meant to render a collection of children, use an array instead' error by rendering an array with the map method or render objects as strings or render the properties individually.
React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.
map() to transform the object into something react can make use of because you cannot directly render an object into React. Instead, by using Array. map() to convert each object in the array into something else, like a string or a component we can then render it.
To render an array of objects in React, we can use the array map method. const Item = (props) => { return <li>{props. message}</li>; }; const TodoList = () => { const todos = ["foo", "bar", "baz"]; return ( <ul> {todos. map((message) => ( <Item key={message} message={message} /> ))} </ul> ); };
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
21
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)}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
