How can I use map to combine an array/nested array into a div?

Question

I am making a recipe box app. Here is the code pen. http://codepen.io/capozzic1/pen/gmpVyr?editors=0110. Here is the code:

class RecipeList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    var recipes = this.props.recipes;

    var recLi = recipes.map(recipe => recipe.ingredients.map(ingred => <li>{ingred}</li>));
    var recNames = recipes.map(recipe => <h2>{recipe.title}</h2>);
    return (
      <div className="recList">
        <ul className="recUl">
          {recNames}
          {recLi}
        </ul>
      </div>
    );
  }
}

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?

Answer 1

Your mistake is you are using 2 different variables.

You will have to create a nested structure of elements to depict in that fashion. You can use following code:

var recLi =
  recipes.map((recipe, index) =>
    <div>
      <h2>{recipe.title}</h2>
      {
        recipe.ingredients.map(ingred =><li>{ingred}</li>)
      }
    </div>
);

Updated Pen

Sample Code

/*
Component ideas
-recipeCon
  -RecipeList
        -Recipe ingredients 

-addRecipe button 
*/
var recipes = [{
    title: "Pizza",
    ingredients: ["Tomato Sauce", "Yeast"]
  }, {
    title: "Cookies",
    ingredients: ["Cookie Dough", "Chocolate chips"]
  }, {
    title: "Turkey tacos",
    ingredients: ["Nacho cheese taco shells", "Turkey"]
  }

]

class RecipeContainer extends React.Component {
    constructor(props) {
      super(props);
      this.state = ({
        recipes: recipes
      });
    }

    render() {
      return (
        <div className="recipeCon">
        {/*recipe list*/}
      
        <RecipeList recipes={this.state.recipes} />
      </div>
      );
    }
  }
  //show list of recipe names
class RecipeList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    var recipes = this.props.recipes;

    var recLi =
      recipes.map((recipe, index) =>
        <div>
          <h2>{recipe.title}</h2>
          {recipe.ingredients.map(ingred =><li>{ingred}</li>)}
        </div>
    );
    var recNames = recipes.map(recipe =>
      <h2>{recipe.title}</h2>
    );
    return (
      <div className="recList">
        <ul className="recUl">
       {recLi}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<RecipeContainer/>, document.querySelector(".recWrap"));

.recipeCon { 
  border: 2px solid black;
  min-height: 200px;
  }

.recAdd { 
/*visibility: hidden;
  */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>
<!--Render on body-->
<div class = "recWrap">
  
</div>