I keep getting this error Objects are not valid as a React child {} If you meant to render a collection of children, use an array instead

Question

This is currently how my code looks

import React from 'react';
import './App.css';

class App extends React.Component {
 
  state = {
  apiData: []
  }
 
  render() {   
    
  console.log('api data is')
    return (
      <div>
        <center>
        <h1 id="title">hello something</h1></center>
        <h1 id="date">{this.state.apiData.title}</h1>
      </div>
    )
  }
 
  componentDidMount() {
    fetch('http://www.mocky.io/v2/5dece3d333000052002b9037')
      .then(response => response.json())
      .then(data => {
        this.setState({
          apiData: data
        })
      })        
      console.log("component fetched data")
  }
}
 
export default App

I get this error when I try access something that has a value but when I do this

     <h1 id="date">{this.state.apiData.date}</h1>

It works

not too sure how to fix as everything I have seen thus far is for data they have created through a const or let as opposed to fetching data from an API

I have tried to do this and I still get an error this one to be exact TypeError: Cannot read property 'rendered' of undefined — Jocodes, Feb 05 '21 at 20:31
Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Emile Bergeron, Feb 05 '21 at 20:50
Also, since the data isn't ready at the first render, you'll need a condition, which in JavaScript can be expressed in different ways [to avoid 'cannot read property of undefined' errors](https://stackoverflow.com/q/14782232/1218980). — Emile Bergeron, Feb 05 '21 at 20:55
and possibly [conditional rendering](https://stackoverflow.com/q/44046037/1218980) with React. — Emile Bergeron, Feb 05 '21 at 20:56

score 3 · Answer 1 · answered Feb 05 '21 at 20:28

3

apiData.title is of type Object, not an Array of JSX children or strings.

You need to use apiData.title.rendered, as shown in this snippet of response data from the API:

  "title": {
    "rendered": "Whatsapp and Facebook Messenger: how group chat is changing the dynamic of our friendships"
  },

answered Feb 05 '21 at 20:28

0xLogN

3,289
1
14
35

I have tried to do this and I still get an error this one to be exact TypeError: Cannot read property 'rendered' of undefined – Jocodes Feb 05 '21 at 20:30
That means `apiData.title` is undefined. Can you edit your post with the full contents of `apiData` as you would get from logging it? – 0xLogN Feb 05 '21 at 20:32
`componentDidMount` runs ***after*** the component renders, so `apiData` itself is just `[]`. You need to fetch the data before it renders. – 0xLogN Feb 05 '21 at 20:36
The data has been fetched already I have access to the data but its the type of data that I think is causing some trouble as it is an object – Jocodes Feb 05 '21 at 20:43
Yes. Can you please log `apiData.title` in your render event? – 0xLogN Feb 05 '21 at 20:48

Nadia Chibrikova · Accepted Answer · 2021-02-05T20:43:18.900

2

Try with a null check {this.state.apiData.title?.rendered}

Update: Try to open the link you're fetching the data from and follow the paths inside, for hero_image you need {this.state.apiData.acf?.hero_image.url}

edited Feb 05 '21 at 20:43

answered Feb 05 '21 at 20:32

Nadia Chibrikova

4,916
1
15
17

This would pass `undefined` potentially, which causes an error. – 0xLogN Feb 05 '21 at 20:35
It should just return undefined – Nadia Chibrikova Feb 05 '21 at 20:36
This actually worked for the title but not for anything else that has the same data set e.g
{this.state.apiData.hero_image?.url}
This doesn't even render anything at all. – Jocodes Feb 05 '21 at 20:39
But I am wondering why ? actually allows the title I want to be rendered to be rendered – Jocodes Feb 05 '21 at 20:40
Updated the answer – Nadia Chibrikova Feb 05 '21 at 20:45
Nadia this has worked perfectly thank you! Do you have any resources on the null check I have never seen this before – Jocodes Feb 05 '21 at 21:14
Happy to help. ?. is called optional chaining - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining – Nadia Chibrikova Feb 05 '21 at 21:17
If this helped, you should mark it as the accepted answer. Here's MDN on optional chaining: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining – 0xLogN Feb 05 '21 at 21:18
@NadiaChibrikova beat me by 22 seconds! – 0xLogN Feb 05 '21 at 21:18
@LoganDevine now there is choice of 2 identical links :D – Nadia Chibrikova Feb 05 '21 at 21:19
For some reason some of them are not rendering on the page am I potentially using the wrong path way e.g
{this.state.apiData._embedded?.author.name}
– Jocodes Feb 05 '21 at 21:35
Would I need to use .map as "widgets": [ { "acf_fc_layout": "paragraph", "paragraph": "
As much as we probably don’t like to admit it, the real soundtrack to our daily lives isn’t Lizzo or the latest installment of ... ] is an array
– Jocodes Feb 05 '21 at 21:36
'author` is an array, so it needs to be `author[0].name`, not sure what you mean about widgets – Nadia Chibrikova Feb 05 '21 at 21:55

score -1 · Answer 3 · edited Feb 08 '21 at 10:21

As render fire before state set so you need to check before state update and use condition or && on "this.state.apiData.title" like this

class App extends React.Component {
 
  state = {
  apiData: []
  }
 
  render() {   
    
  console.log('api data is')
    return (
      <div>
        <center>
        <h1 id="title">hello something</h1></center>
        <h1 id="date">{this.state.apiData.title && this.state.apiData.title.rendered}</h1>
      </div>
    )
  }
 
  componentDidMount() {
    fetch('http://www.mocky.io/v2/5dece3d333000052002b9037')
      .then(response => response.json())
      .then(data => {
        this.setState({
          apiData: data
        })
      })        
      console.log("component fetched data")
  }
}
 
  ReactDOM.render(
    <App  />
    , document.getElementById('root'));

<div id="root" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I keep getting this error Objects are not valid as a React child {} If you meant to render a collection of children, use an array instead

3 Answers3

{this.state.apiData.hero_image?.url}

{this.state.apiData._embedded?.author.name}