From 8eeb04f654808d6d7d1a8f903ab0042d4add0f85 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Wed, 9 Dec 2020 22:42:33 +1300
Subject: [PATCH] component: add burger ingredients by props in the dynamic way

---
 src/components/Burger/Burger.js               | 13 ++++++++++---
 src/containers/BurgerBuilder/BurgerBuilder.js | 11 ++++++++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/Burger/Burger.js b/src/components/Burger/Burger.js
index 634fa55..c9d0a2b 100644
--- a/src/components/Burger/Burger.js
+++ b/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>
     )
diff --git a/src/containers/BurgerBuilder/BurgerBuilder.js b/src/containers/BurgerBuilder/BurgerBuilder.js
index b0bc4fa..4ef7a07 100644
--- a/src/containers/BurgerBuilder/BurgerBuilder.js
+++ b/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>
         );