title: React props is undefined - Cannot read property 'map' of undefined
body: <p>I'm a little stumped with this one and I'm starting to suspect it's something and my eyes are just glazing over it. I'm initializing <code>this.state</code> with <code>ingredients: []</code> and then passing it as a prop to a child component <code>&lt;RecipePreview ingredients={this.state.ingredients} instructions={this.state.instructions}/&gt;</code>. In the child component I have the following <code>this.props.ingredients.map</code> which throws the following error: </p>
  
  <blockquote>
    <p>myRecipes-d3093398f8879b688ddb.js:41689 Uncaught TypeError: Cannot
    read property 'map' of undefined</p>
  </blockquote>
  
  <p>Everything seems set up correctly so I'm not sure where the mistake lies. One thing to note is when I remove the map and simply render the contents of the prop (say [1,2,3]) it renders without error.</p>
  
  <p>Below are the two components. There are more components in this file but I'm only pasting the two relevant ones. Let me know what you guys think.</p>
  
  <pre><code>class CreateRecipe extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              ingredients: [[1,2,3]],
              instructions: [[]]
          };
  
          this.addIngredient = this.addIngredient.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      addIngredient(quantity, unit, ingredient) {
          let ingredients = this.state.ingredients;
          ingredients.push([quantity, unit, ingredient]);
          this.setState({ingredients: ingredients})
      };
  
      handleSubmit = event =&gt; {
  
      };
  
      validateForm() {
          return this.state.ingredients !== [] || this.state.instructions !== [];
      }
  
      render() {
  
          return (
              &lt;div className={"list-container flex-row"}&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;
                      &lt;AddIngredient addIngredient={this.addIngredient}/&gt;
                      &lt;Button block bsSize="small" disabled={!this.validateForm()} type="submit"&gt;
                          Add Recipe
                      &lt;/Button&gt;
                  &lt;/form&gt;
                  &lt;RecipePreview ingredients={this.state.ingredients} instructions={this.state.instructions}/&gt;
              &lt;/div&gt;)
      }
  }
  
  class RecipePreview extends React.Component {
      constructor(props) {
          super(props)
  
      }
  
      render() {
          return (
              &lt;div&gt;
                  Recipe Preview
                  {this.props.ingredients.map((ingredient, index) =&gt; {
                      return (
                          &lt;div key={`ingredient${index}`}&gt;
                              {`${ingredient[0]} ${ingredient[1]} ${ingredient[2]}`}
                          &lt;/div&gt;
                      )
                  })}
              &lt;/div&gt;
          )
      }
  }
  </code></pre>