title: Get the for "TypeError: Cannot read property 'map' of undefined"
body: <p>When I try to run my code, it show this error: Cannot read property 'map' of undefined"</p>
  
  <p>Here is my code: </p>
  
  <pre><code>import React, { Component } from 'react';
  import Recipe from './Recipe';
  import RecipeSearch from './RecipeSearch';
  
  export default class RecipeList extends Component {
      render() {
          const { recipes } = this.props;
          return (
                  &lt;React.Fragment&gt;
                      &lt;RecipeSearch /&gt;
                      &lt;div className="container my-5" &gt;
                          {/*title*/ }
                          &lt;div className="row"&gt;
                              &lt;div className="col-10 mx-auto col-md-6 text-center text-uppercase mb-3"&gt;
                                  &lt;h1 className="text-slanted"&gt;recipe list&lt;/h1&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      {/*end of title*/}
                          &lt;div className="row"&gt;
                              {recipes.map(recipe =&gt;{
                                  return &lt;Recipe key={recipe.recipe_id}
                                  recipe={recipe}/&gt;;  
                              })}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/React.Fragment&gt;
              );
      }
  }
  </code></pre>
  
  <p>So how would I fix it?</p>