title: How to send JSON object to a component in React?
body: <p>I am new to React and am running through a tutorial that uses the Poke API (<a href="https://pokeapi.co" rel="nofollow noreferrer">https://pokeapi.co</a>).</p>
  
  <p>I am using whatwg-fetch to make requests to the API. This saves data from the API as an object to the state 'selectedPokemon'.</p>
  
  <pre><code>    this.state = {
        // other states
        showModal: false,
        selectedPokemon: null
      };
  </code></pre>
  
  <p>I want to send that data to a component (in my case a modal), so I updated my modal component call to include the selectedPokemon state as a prop:</p>
  
  <pre><code>&lt;PokemonModal pokemon={this.state.selectedPokemon} closeModal={this.handleModalClose} showModal={this.state.showModal} /&gt;
  </code></pre>
  
  <p>I also updated my PokemonModal component (on PokemonModal.js) to include <code>pokemon</code> as a prop:</p>
  
  <pre><code>const PokemonModal = ({showModal, closeModal, pokemon}) =&gt; {
  </code></pre>
  
  <p>However, when I go to use that prop within <code>PokemonModal</code>, eg:</p>
  
  <pre><code>&lt;Modal.Title&gt;{pokemon.name}&lt;/Modal.Title&gt;
  </code></pre>
  
  <p>I get an error</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'name' of null</p>
  </blockquote>
  
  <p>(This is the same with any other part of the object I try to use eg <code>pokemon.order</code>. The showModal and closeModal props work as expected.)</p>
  
  <p>Would anyone know how I could send and use a JSON object to another component?</p>
  
  <hr>
  
  <p>If it matters, my fetch function is set up as such. The console.log returns the expected result, which is the object from: <a href="https://pokeapi.co/api/v2/pokemon/10125/" rel="nofollow noreferrer">https://pokeapi.co/api/v2/pokemon/10125/</a></p>
  
  <pre><code>  handleModalOpen(pokemon) {
      if(pokemon.url !== undefined) {
        fetch(`${pokemon.url}`)
          .then(response =&gt; {
            return response.json();
          })
          .then(json =&gt; {
            this.setState({
              selectedPokemon: json,
              showModal: true
            }) 
            console.log('selected: ' + this.state.selectedPokemon);
          })
          .catch(ex =&gt; {
            console.log('pasrsing failed ' + ex);
          })
      }
    }
  </code></pre>