title: TypeError: Cannot read property of undefined using React
body: <p>I'm new in React and I'm doing a little app with PokeAPI. I have a component called PokemonDetail in which I want to show the details of a pokemon, but the app throws me the next error</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'front_default' of undefined</p>
  </blockquote>
  
  <p>my component looks like this:</p>
  
  <pre><code>import React from "react";
  
  const PokemonDetail = ({ pokemon }) =&gt; {
    return (
      &lt;div&gt;
        &lt;div className="text-center"&gt;{pokemon.name}&lt;/div&gt;
        &lt;img src={pokemon.sprites.front_default} alt={pokemon.name} /&gt;
        {pokemon.id}
      &lt;/div&gt;
    );
  };
  
  export default PokemonDetail;
  </code></pre>
  
  <p>And the App component from which the PokemonDetail recive the prop of pokemon looks like this:</p>
  
  <pre><code>import React from "react";
  import PokeAPI from "../apis/PokeAPI";
  import SearchBar from "./SearchBar";
  import PokemonDetail from "./PokemonDetail";
  
  class App extends React.Component {
    state = { pokemon: '' };
  
    onTermSubmit = async term =&gt; {
      try {
        const response = await PokeAPI.get(`pokemon/${term}`);
        this.setState({ pokemon: response.data });
        console.log(response);
      } catch (error) {
        console.log("No existe");
      }
    };
  
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="row mt-3"&gt;
            &lt;div className="col"&gt;
              &lt;SearchBar onFormSubmit={this.onTermSubmit} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="row mt-3"&gt;
            &lt;div className="col-9" /&gt;
            &lt;div className="col-3"&gt;
              &lt;PokemonDetail pokemon={this.state.pokemon} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I don't understand why it throws me this error because only throws it with this and other properties of the json. With the <code>name</code> property works and wait until I send it some props, same with the <code>id</code> but no with the <code>front_default</code> property, which is a url of a image. </p>