Get Undefined when trying to access array nested in Object in ReactJS

Question

I've tried asking this question before, but I still can't figure it out. I know about dot and bracket notation, and I've tried using empty keys, but still nothing. Anyways, I have a JSON array of objects from an API, as such:

[
  {
    "group": {
      "id": 1,
      "letter": "A",
      "teams": [
        {
          "team": {
            "id": 4,
            "country": "Uruguay",
            "fifa_code": "URU",
            "points": 9,
            "wins": 3,
            "draws": 0,
            "losses": 0,
            "games_played": 3,
            "goals_for": 5,
            "goals_against": 0,
            "goal_differential": 5
          }
        },
        {
          "team": {
            "id": 1,
            "country": "Russia",
            "fifa_code": "RUS",
            "points": 6,
            "wins": 2,
            "draws": 0,
            "losses": 1,
            "games_played": 3,
            "goals_for": 8,
            "goals_against": 4,
            "goal_differential": 4
          }
        },
        {
          "team": {
            "id": 2,
            "country": "Saudi Arabia",
            "fifa_code": "KSA",
            "points": 3,
            "wins": 1,
            "draws": 0,
            "losses": 2,
            "games_played": 3,
            "goals_for": 2,
            "goals_against": 7,
            "goal_differential": -5
          }
        },
        {
          "team": {
            "id": 3,
            "country": "Egypt",
            "fifa_code": "EGY",
            "points": 0,
            "wins": 0,
            "draws": 0,
            "losses": 3,
            "games_played": 3,
            "goals_for": 2,
            "goals_against": 6,
            "goal_differential": -4
          }
        }
      ]
    }
  },
  {
    "group": {
      "id": 2,
      "letter": "B",
      "teams": [
        {
          "team": {
            "id": 6,
            "country": "Spain",
            "fifa_code": "ESP",
            "points": 5,
            "wins": 1,
            "draws": 2,
            "losses": 0,
            "games_played": 3,
            "goals_for": 6,
            "goals_against": 5,
            "goal_differential": 1
          }
        },
        {
          "team": {
            "id": 5,
            "country": "Portugal",
            "fifa_code": "POR",
            "points": 5,
            "wins": 1,
            "draws": 2,
            "losses": 0,
            "games_played": 3,
            "goals_for": 5,
            "goals_against": 4,
            "goal_differential": 1
          }
        },
        {
          "team": {
            "id": 8,
            "country": "Iran",
            "fifa_code": "IRN",
            "points": 4,
            "wins": 1,
            "draws": 1,
            "losses": 1,
            "games_played": 3,
            "goals_for": 2,
            "goals_against": 2,
            "goal_differential": 0
          }
        },
        {
          "team": {
            "id": 7,
            "country": "Morocco",
            "fifa_code": "MAR",
            "points": 1,
            "wins": 0,
            "draws": 1,
            "losses": 2,
            "games_played": 3,
            "goals_for": 2,
            "goals_against": 4,
            "goal_differential": -2
          }
        }
      ]
    }
  }
]

So I set the state to include the array of objects, like so:

componentDidMount(){
    fetch(`url`)
    .then(data => data.json())
    .then(data=> {
      this.setState({
        groups: data
      })
    })
  }

Now, the ultimate goal is to pass down the state as props to a presentational component, but I can't even console.log the id, letters, or teams of the groups in the array, let alone use it as props.

To get the id of the group, this is what I've tried:

console.log(this.state.groups[0].group)

And I get the error: TypeError: Cannot read property 'group' of undefined

I really don't understand why, and the same error comes up if I try bracket notation.

When I try:

console.log(this.state.groups[0])

I get the correct group object, but I can't console.log anything deeper than that.

Also, I've tried setting the state to include the two different groups like:

componentDidMount(){
    fetch(`url`)
    .then(data => data.json())
    .then(data=> {
      this.setState({
        group1: data[0].group,
        group2: data[1].group
      })
    })
  }

And that works fine, but then I can't access the teams array of objects, so the problem persists.

Any help would be greatly appreciated!!!

Answer 1

Fetching the groups is asynchronous, so when your component first mounts groups won't be defined in the state. Or even if you set it to an empty array initially, that still means groups[0] won't be defined. Before logging/rendering anything from this.state.groups you have to check if it's defined and if it has the data yet.

Answer 2

So, the problem was that the groups was becoming undefined because of the asynchronous nature, which made sense (@Jayce444 said it too). All I have to do to stop that, is make the default state = null, which is defined:

https://www.ajaymatharu.com/javascript-difference-between-undefined-and-null/

so this will fix it:

this.state {
groups: null
}