React - Can't access a property of an object stored in state?

React - Can't access a property of an object stored in state?
0.0 0


I’m wondering if someone can explain to me why the following code does not work.

class App extends React.Component {
  constructor() {
    this.state = {
      data: []
  componentDidMount() {
    fetch('').then(response => {
      response.json().then(data => {
          data: data.Search
  render() {

  <App />,

When I console.log([0]) it returns the object with a property of Title. But when I console.log([0].Title) it returns undefined.

How can I map over the object the way that I would with a typical array?


The problem is that console.log([0]); gets called two times:

  1. When the page first loads, before you have a chance to load data from the API.
  2. After the API request finishes and you call this.setState

I would check that data's length is greater than 0 before trying to use it. Try changing console.log([0]); to this:

if ( > 0) {

Does that work how you want it to?


Yes, that did work. Thank you! I don’t understand why this works though?

Also, now that I can access, how can I map over it to display the title of every object?


Thank you very much for the detailed response. That makes a lot of sense to me now.


Thank you so much, I’ve been stuck on this for embarrassingly long!