Accessing an array that has an object as a value - reactjs

Question

I'm using the pokeapi to with react. I want to display the values in the types property but can't seem to do so. I get a cannot read property of value 0 undefined. I've tried several methods such as storing the types object in a variable then looping through the elements but I get the same error.
My code is below:
App.js
state = {
pokemonData: []
}
componentDidMount() {
fetch(`https://pokeapi.co/api/v2/pokemon/mewtwo`)
.then(response => response.json())
.then(data => {
//console.log(data);
this.setState({pokemonData: data});
})
.catch(error => console.log(`Error fetching and parsing data ${error}`));
}
render() {
return (
<>
<Display data={this.state.pokemonData}/>
</>
);
}
Display.js
import React from 'react';
const Display = (props) => {
return (
<>
<h1 className="pokemon-name">{props.data.name}</h1>
<p>{props.data.id}</p>
<p>{props.data.types[0].type.name}</p>
</>
);
}
export default Display;

Answer 1

First of all you initialize your state with an empty array but the data returned by your API is actually an object. Secondly you're trying to render some data by giving an empty array as props (the actual data will come later). So props.data.types doesn't exist and props.data.types[0] will return an error.
Initialize with an empty object
state = {
pokemonData: {}
}
Then in your render function, make sure you have something in your pokemonData before rendering:
return (
<>
{this.state.pokemonData.name !== undefined &&
<Display data={this.state.pokemonData}/>
}
</>
);