title: Dynamically adding component to a react page depending on state
body: <p>so I'm learning react via Udemy and the instructor wrote this code to dynamically render the content of the burger ingredients using the state. Basically, he is converting the state object to an array and using that to render stuff.</p>
  
  <pre><code>import React from "react";
  import classes from "./Burger.css";
  import BurgerIngredient from "./BurgerIngredients/BurgerIngr";
  
  const burger = (props) =&gt; {
    const transformedIngr = 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;
        {transformedIngr}
        &lt;BurgerIngredient type="bread-bottom" /&gt;
      &lt;/div&gt;
    );
  };
  
  export default burger;
  
  //Object.entries(props.ingredients).map((indexOne, indexTwo)
  </code></pre>
  
  <p>The code seem to to very complex and I'm unable to understand it even after several times watching the same video. I mean, I researched online and saw that there is a better way to convert an object to array using </p>
  
  <pre><code>Object.entries(props.ingredients)
  </code></pre>
  
  <p>Can anyone explain me the existing code as well is is it possible to use <strong>Object.entries</strong> to make it any easier ? Or any other alternative method to do the same ? </p>
  
  <p><strong>BurgerBuilder.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import Aux from "../../hoc/aux";
  import Burger from "../../components/Burger/Burger";
  
  class BurgerBuilder extends Component {
    state = {
      ingredients: {
        meat: 1,
        salad: 2,
        cheese: 1,
        bacon: 1,
      },
    };
  
    render() {
      return (
        &lt;Aux&gt;
          &lt;Burger ingredients={this.state.ingredients} /&gt;
          &lt;div&gt;Controls&lt;/div&gt;
        &lt;/Aux&gt;
      );
    }
  }
  </code></pre>
  
  <p>export default BurgerBuilder;</p>
  
  <p><strong>BurgerIngriedent.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import Classes from "./original.css";
  import PropTypes from "prop-types";
  
  class BurgerIngredients 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 "salad":
          ingredient = &lt;div className={Classes.Salad}&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;
        default:
          ingredient = null;
          break;
      }
      return ingredient;
    }
  }
  
  BurgerIngredients.propTypes = {
    type: PropTypes.string.isRequired,
  };
  
  export default BurgerIngredients;
  </code></pre>
  
  <p>Thank you.</p>