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

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

26 thoughts on “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”

  1. Great blog you have here but I was curious about if you knew of any message boards that cover the same
    topics discussed here? I’d really love to be a part of online community where I can get responses from
    other knowledgeable people that share the same interest.

    If you have any suggestions, please let me know.

    Thanks a lot!

    Reply
  2. I’m truly enjoying the design and layout of your blog. It’s a
    very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a developer to create your theme?
    Fantastic work!

    Reply
  3. That is very fascinating, You’re an excessively professional blogger.

    I have joined your feed and sit up for in search of more of your fantastic post.

    Additionally, I have shared your web site in my social networks

    Reply
  4. Hi there! I could have sworn I’ve been to this blog before but after checking
    through some of the post I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be bookmarking and checking back often!

    Reply
  5. After going over a handful of the articles on your site, I truly like your technique
    of writing a blog. I book-marked it to my bookmark website list and will be checking back in the near future.
    Take a look at my web site too and let me know what you think.

    Reply
  6. It is the best time to make some plans for the
    future and it is time to be happy. I have read this post and if I could
    I wish to suggest you some interesting things or tips.
    Maybe you can write next articles referring to this article.
    I want to read even more things about it!

    Reply
  7. Hmm it seems like your blog ate my first comment (it was super
    long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying
    your blog. I as well am an aspiring blog blogger but I’m still
    new to the whole thing. Do you have any points for
    rookie blog writers? I’d definitely appreciate it.

    Reply
  8. Attractive element of content. I simply stumbled upon your weblog and in accession capital to say that I acquire actually loved account your blog
    posts. Any way I’ll be subscribing to your augment and
    even I fulfillment you get admission to consistently quickly.

    Reply

Leave a Comment