How Do I Access Elements Of An Array In A Property In Javascript Object?

The following code works: import React, { Component } from 'react'; import './App.css'; import Menu_dropdown from './component/menu_dropdown'; class App extends Component { co

Solution 1:

When state is first initialized to { races: {}}, races.results will be undefined and you can't get any elements from undefined.

Simply change the constructor to:

constructor() {
    super()
    this.state = {
      races: {results: []}
    }
  }

This way the component can render an empty array while loading and the fetch results when the fetch call is resolved.