title: How can I use map to combine an array/nested array into a div?
body: <p>I am making a recipe box app. Here is the code pen. <a href="http://codepen.io/capozzic1/pen/gmpVyr?editors=0110" rel="nofollow noreferrer">http://codepen.io/capozzic1/pen/gmpVyr?editors=0110</a>. Here is the code: </p>
  
  <pre><code>class RecipeList extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      var recipes = this.props.recipes;
  
      var recLi = recipes.map(recipe =&gt; recipe.ingredients.map(ingred =&gt; &lt;li&gt;{ingred}&lt;/li&gt;));
      var recNames = recipes.map(recipe =&gt; &lt;h2&gt;{recipe.title}&lt;/h2&gt;);
      return (
        &lt;div className="recList"&gt;
          &lt;ul className="recUl"&gt;
            {recNames}
            {recLi}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Ideally, I want to have each recipe name and its accompanying ingredients. Right now, it shows stacked. Is there a way I can use map to have recNames and recLi merged into one div together for each recipe? </p>