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

JavaScript
1

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

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    }
  }
  
  componentDidMount() {
    fetch('https://www.omdbapi.com/?s=batman&plot=full&apikey=thewdb').then(response => {
      response.json().then(data => {
        //console.log(data);
        this.setState({
          data: data.Search
        })
      })
    })
  }
  
  render() {
    console.log(this.state.data[0]);
    return(
      <h1>Working</h1>
    )
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('div')
)

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

How can I map over the object this.state.data the way that I would with a typical array?

2

The problem is that console.log(this.state.data[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(this.state.data[0]); to this:

if (this.state.data.length > 0) {
  console.log(this.state.data[0].Title);
}

Does that work how you want it to?

4 Likes
3

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

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

5

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

6

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

7

that work because wen page first time load your state is empty and u try console.log that is reason for error, but when u set condition u wait for load state on second render page when state inst empty console work…shortly

8

try use setState and useEffect in react 16 you don’t need classes