title: Error while rendering an array.map() in React
body: <p>I'm super new to React and this might be a dumb question but I'm getting an error saying: <code>Uncaught TypeError: Cannot read property 'map' of undefined
  </code> when I'm trying to display the ingredients for each recipe. I'm not sure if I can use an array.map inside of the return statement, or where else should I include it, if it is a part of my component? I just want to go through the ingredients and display them . Thanks for any help<img src="https://i.stack.imgur.com/0SFSZ.png" alt="![Screenshot of my console">]<a href="https://i.stack.imgur.com/0SFSZ.png" rel="nofollow noreferrer">1</a></p>
  
  <pre><code>   import React, { Component } from "react";
  
      class Recipe extends Component {
          state = {
              activeRecipe: []
          }
          componentDidMount = async() =&gt; {
              const title = this.props.location.state.recipe;
              const req = await fetch
              (`https://api.edamam.com/search?q=${title}&amp;app_id=${API_ID}&amp;app_key=${API_KEY}`);
  
              const res = await req.json();
              this.setState({ activeRecipe: res.hits[0].recipe});
              console.log(this.state.activeRecipe);
              }
              render() {
                  const recipe = this.state.activeRecipe;
                  return (
                     &lt;div className="container"&gt;
                         &lt;div className="active-recipe"&gt;
                             &lt;h3 className="active-recipe"&gt;{recipe.label}&lt;/h3&gt;
                             &lt;div className="container"&gt;
                             {recipe.ingredients.map(ingredient =&gt; {
                              return (
                                  &lt;p&gt;{ingredient.text}&lt;/p&gt;
                              );
                             })}
                             &lt;/div&gt;
                         &lt;/div&gt;
                     &lt;/div&gt;
                  );
              }
      }
  
      export default Recipe;
  </code></pre>