component: add burger ingredients by props in the dynamic way

src/components/Burger/Burger.js

@@ -3,12 +3,19 @@ import React from 'react'
 import classes from './Burger.css';
 import BurgerIngredient from './BurgerIngredient/BurgerIngredient';
 
-const burger = () => {
+const burger = (props) => {
+
+    const transformedIngredients = Object.keys(props.ingredients)
+    .map(igKey => {
+        return [...Array(props.ingredients[igKey])].map( (_, i) => {
+            return <BurgerIngredient key={igKey + i} type={igKey} />;
+        })
+    });
+
     return (
         <div className={classes.Burger}>
             <BurgerIngredient type="bread-top" />
-            <BurgerIngredient type="meat" />
-            <BurgerIngredient type="cheese" />
+            {transformedIngredients}
             <BurgerIngredient type="bread-bottom" />
         </div>
     )

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -5,10 +5,19 @@ import Burger from '../../components/Burger/Burger';
 
 class BurgerBuilder extends Component {
 
+    state = {
+        ingredients: {
+            meat: 1,
+            cheese: 1, 
+            salad: 2,
+            bacon: 2,
+        }
+    }
+
     render() {
         return (
             <Aux>
-                <Burger />
+                <Burger ingredients={this.state.ingredients}  />
                 <div>Build Controls</div>
             </Aux>
         );