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

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!

1 Like

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

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