title: TypeError: Cannot read property 'map' of undefined When trying to map multiple arrays
body: <p>I am trying to map multiple arrays at the same time and im not sure if this is how you do it. I am getting the error</p>
  <blockquote>
  <p>TypeError: Cannot read property 'map' of undefined</p>
  </blockquote>
  <p>When trying the following code</p>
  <pre><code>import React, { Component } from 'react';
  import Axios from 'axios';
  import NavBar from '../header-footer/nav-bar'
  import Featured from './FeaturedMealplan'
  import RecipeItem from './RecipeItem'
  
  export default class MealPlanDetail extends Component {
    constructor(props) {
        super(props);
  
        this.state = {
            currentId: this.props.match.params.slug,
            mealplanItem: {}, // Full mealplan
            mealplanRecipes: [], // Contains recipe names and difficulty.
        }
    }
  
    getMealplanItem() {
      Axios.get(`http://localhost:5000/get-mealplan/${this.state.currentId}`
      ).then(response =&gt; {
          console.log(&quot;response&quot;, response)
          this.setState({
              mealplanItem: response.data.mealplan,
              mealplanRecipes: this.state.mealplanRecipes.concat(response.data.mealplan[&quot;recipes&quot;]),
              mealplanIngredients: this.state.mealplanIngredients.concat(response.data.mealplan[&quot;recipe_info&quot;]),
              recipeItem: response.data.mealplan.recipes
          })
      }).catch(error =&gt; {
          console.log(&quot;mealplan-detail GET Error &quot;, error)
      })
    }
  
    componentDidMount() {
        this.getMealplanItem();
    }
  
    render() {
        const renderRecipe = this.state.recipes.map((recipe, idx) =&gt; {
            return (
                &lt;div key={idx}&gt;
                    &lt;h1&gt;{recipe.recipe_name}&lt;/h1&gt;
                    &lt;h2&gt;Recipe Difficulty: &lt;span&gt;{recipe.recipe_dificulty}&lt;/span&gt;&lt;/h2&gt;
                    &lt;div&gt;
                      &lt;RecipeItem recipeItem={this.state.recipeItem} /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            )
        })
        return (
            &lt;div&gt;
                &lt;NavBar/&gt;
                &lt;Featured/&gt;
                {renderRecipe}
            &lt;/div&gt;
        )
    }
  }
  </code></pre>
  <p>Data that is given: <a href="https://pastebin.com/uYUuRY6U" rel="nofollow noreferrer">https://pastebin.com/uYUuRY6U</a></p>
  <p>I just need to be able to format it correctly which this is how I would like it formatted in the renderRecipe return. I am new to mapping and do not know if there is a way to fix or a better way.</p>