{"id":8127,"date":"2023-06-21T09:05:28","date_gmt":"2023-06-21T09:05:28","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=8127"},"modified":"2025-06-04T08:00:49","modified_gmt":"2025-06-04T08:00:49","slug":"react-error-objects-not-valid-as-child","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/react-error-objects-not-valid-as-child","title":{"rendered":"Objects Are Not Valid As React Child"},"content":{"rendered":"<p>Error is thrown when an Object is directly being passed to be rendered as a component child OR props.<br \/>\nReact does not support objects being rendered directly.<\/p>\n<p>Normally, to render objects we can access a value by accessing key of object<br \/>\nExample:-<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">let personObj = {name : \u201cDummyName\u201d}<\/pre>\n<p>Try accessing like this<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">{personObj.name}<\/pre>\n<p>Another option is to iterate over object, i.e.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">{Object.keys(personObj).map((key) =&gt; (\r\n  &lt;div key={key}&gt;\r\n    {key}: {personObj[key]}\r\n  &lt;\/div&gt;\r\n))}\r\n<\/pre>\n<p>This will render the whole object with key-value pair.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Error is thrown when an Object is directly being passed to be rendered as a component child OR props. React does not support objects being rendered directly. Normally, to render objects we can access a value by accessing key of object Example:- let personObj = {name : \u201cDummyName\u201d} Try accessing like this {personObj.name} Another option [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8340,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8127"}],"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=8127"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8127\/revisions"}],"predecessor-version":[{"id":12496,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8127\/revisions\/12496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/8340"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=8127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=8127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=8127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}