{"id":9775,"date":"2024-03-12T05:21:18","date_gmt":"2024-03-12T05:21:18","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9775"},"modified":"2024-03-12T05:21:18","modified_gmt":"2024-03-12T05:21:18","slug":"objects-are-not-valid-as-a-react-child","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react-native\/objects-are-not-valid-as-a-react-child","title":{"rendered":"Objects Are Not Valid as a React Child"},"content":{"rendered":"<p>The error <strong>&#8220;Objects are not valid as a React child&#8221;<\/strong> typically occurs when you try to render an object directly in your JSX. This issue commonly arises when trying to display complex data types, such as Date objects, without converting them to a format that React can render.<\/p>\n<p>Let\u2019s take an example of Timer,<\/p>\n<p>The below code shows how we can display the elapsed time as a string. In code, this.state.timeElapsed is a Date object, which cannot be directly rendered in JSX. Instead, we need to convert it to a string.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">import React from 'react';\r\nimport {TouchableHighlight, Text, View, StyleSheet} from 'react-native';\r\n\r\nexport class Timer extends React.Component {\r\n constructor(props) {\r\n   super(props);\r\n   this.state = {\r\n     timeElapsed: null,\r\n     isStarted: false,\r\n   };\r\n }\r\n\r\n handleStartPress() {\r\n   if (!this.state.isStarted) {\r\n     this.setState({isStarted: true});\r\n     setInterval(() =&gt; {\r\n       this.setState({timeElapsed: new Date()});\r\n     }, 1000);\r\n   } else {\r\n     this.setState({timeElapsed: null, isStarted: false});\r\n   }\r\n }\r\n\r\n render() {\r\n   const {timeElapsed, isStarted} = this.state;\r\n   const elapsedTimeString =\r\n     isStarted &amp;&amp; timeElapsed ? timeElapsed.toISOString() : '';\r\n   return (\r\n     &lt;View style={styles.container}&gt;\r\n       &lt;View style={styles.timerContainer}&gt;\r\n         &lt;Text&gt;{elapsedTimeString}&lt;\/Text&gt;\r\n       &lt;\/View&gt;\r\n       &lt;TouchableHighlight\r\n         underlayColor=\"gray\"\r\n         onPress={() =&gt; this.handleStartPress()}&gt;\r\n         &lt;Text&gt;{this.state.isStarted ? 'Stop' : 'Start'}&lt;\/Text&gt;\r\n       &lt;\/TouchableHighlight&gt;\r\n     &lt;\/View&gt;\r\n   );\r\n }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n container: {\r\n   flex: 1,\r\n   justifyContent: 'center',\r\n   alignItems: 'center',\r\n },\r\n timerContainer: {\r\n   marginVertical: 5,\r\n },\r\n});\r\n<\/pre>\n<p>In this example, toISOString() is used to convert the Date object to a string. You can format the string further to display only the parts of the time you&#8217;re interested in.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The error &#8220;Objects are not valid as a React child&#8221; typically occurs when you try to render an object directly in your JSX. This issue commonly arises when trying to display complex data types, such as Date objects, without converting them to a format that React can render. Let\u2019s take an example of Timer, The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9771,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-9775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9775"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9775"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9775\/revisions"}],"predecessor-version":[{"id":9776,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9775\/revisions\/9776"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9771"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}