title: TypeError: Cannot convert undefined or null to object
body: <p>I'm a beginner here and i was working with some react course from udemy and while everything was working perfect and fine and all my files are double checked with the instructor by myself but at this point it is throwing an error which i'm unable to figure out.</p>
  
  <p>the error is thrown as shown below.</p>
  
  <pre><code> 6 |    const transformedIngredients = Object.keys(props.ingredients)
     7 |    .map(igKey =&gt; {
     8 |        return [...Array(props.ingredients[igKey])].map((_, i) =&gt; {
  &gt;  9 |           return &lt;BurgerIngredient key={igKey + i} type={igKey} /&gt;;
       |                 ^  
    11 |        });
    12 |    });
  </code></pre>
  
  <p>burger.js</p>
  
  <pre><code>import React from 'react';
  import classes from './Burger.css';
  import BurgerIngredient from './BurgerIngredient/BurgerIngredient';
  
  const burger = (props) =&gt; {
      const transformedIngredients = Object.keys(props.ingredients)
      .map(igKey =&gt; {
          return [...Array(props.ingredients[igKey])].map((_, i) =&gt; {
             return &lt;BurgerIngredient key={igKey + i} type={igKey} /&gt;;
  
          });
      });
      return (
      &lt;div className ={classes.Burger}&gt;
          &lt;BurgerIngredient type="bread-top" /&gt;
         {transformedIngredients}
          &lt;BurgerIngredient type="bread-bottom" /&gt;
      &lt;/div&gt;
      );
  };
  
  export default burger; 
  </code></pre>
  
  <p>the code is same as the instructor but throwing above error.</p>
  
  <p>other two files are pasted below</p>
  
  <p>burgerbuilder.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import Auxy from '../../Hoc/Auxy'; 
  import Burger from '../../components/Burger/Burger';
  
  class BurgerBuilder extends Component {
  
      state = {
          ingredients: {
              salad: 1,
              bacon: 1,
              meat: 1,
              cheese: 2
  
          }
      }
      render() {
          return ( 
              &lt;Auxy&gt;
                   &lt;Burger /&gt;
                  &lt;div&gt;Build Controls &lt;/div&gt;
  
              &lt;/Auxy&gt;
          );
      }
  }
  export default BurgerBuilder;
  </code></pre>
  
  <p>burgeringredient.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import PropTypes from 'prop-types';
  import classes from './BurgerIngredient.css';
  
  class BurgerIngredient extends Component {
      render () {
  
          let ingredient = null;
          switch (this.props.type){
          case ('bread-bottom'):
          ingredient = &lt;div className={classes.BreadBottom}&gt;&lt;/div&gt;;
          break;
          case ('bread-top'):
          ingredient = (
              &lt;div className={classes.BreadTop}&gt;
              &lt;div className={classes.Seeds1}&gt;&lt;/div&gt;
              &lt;div className={classes.Seeds2}&gt;&lt;/div&gt;
              &lt;/div&gt;
          );
          break;
          case ('meat'):
          ingredient =&lt;div className={classes.Meat}&gt;&lt;/div&gt;;
          break;
          case ('cheese'):
          ingredient =&lt;div className={classes.Cheese}&gt;&lt;/div&gt;;
          break;
          case ('bacon'):
          ingredient =&lt;div className={classes.Bacon}&gt;&lt;/div&gt;;
          break;
          case ('salad'):
          ingredient =&lt;div className={classes.Salad}&gt;&lt;/div&gt;;
          break;
          default:
          ingredient =null;
      }
      return ingredient;
  
      }
  } 
  
  BurgerIngredient.propTypes={
      type: PropTypes.string.isRequired
  };
  
  export default BurgerIngredient;
  </code></pre>