title: react mapping over array of objects
body: <p>My current state is an array of objects. I am mapping over them and I am getting exactly what I want. However, inside of my array of objects I am not receiving the ingredients that I want. I am receiving the console.log of that value but the value it self I am not displaying anything on the dom. Heres my code. I am trying to have my ingredients show up inside of the li that I am mapping but when I click on my panels I am receiving no value. However, my console.log below it shows a value. idk...</p>
  
  <pre><code>import React from 'react';
  import Accordian from 'react-bootstrap/lib/Accordion';
  import Panel from 'react-bootstrap/lib/Panel';
  import Button from 'react-bootstrap/lib/Button';
  import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
  import Modal from 'react-bootstrap/lib/Modal';
  import FormGroup from 'react-bootstrap/lib/FormGroup';
  import ControlLabel from 'react-bootstrap/lib/ControlLabel';
  import FormControl from 'react-bootstrap/lib/FormControl';
  
  export default class App extends React.Component {
    constructor () {
      super();
  
      this.state = {recipes: [
        {recipeName: 'Pizza', ingredients: ['Dough', 'Cheese', 'Sauce']},
          {recipeName: 'Chicken', ingredients: ['Meat', 'Seasoning', 'other']},
            {recipeName: 'Other', ingredients: ['other1', 'other2', 'other3']}
      ]};
      console.log(this.state.recipes);
    }
    render() {
      const recipes = this.state.recipes.map((recipe, index) =&gt; {
        return (
            &lt;Panel header={recipe.recipeName} eventKey={index} key={index}&gt;
              &lt;ol&gt;
                {recipe.ingredients.map((ingredient) =&gt; {
                  &lt;li&gt; {ingredient} &lt;/li&gt;
                  console.log(ingredient);
                })}
              &lt;/ol&gt;
  
            &lt;/Panel&gt;
        )
      });
      return (
        &lt;div className="App container"&gt;
           &lt;Accordian&gt;
            {recipes}
           &lt;/Accordian&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>