Outputting <BurgerIngredients /> Dynamically

README.md

@@ -19,3 +19,4 @@ NOTE: There can be more additions into the design, over iterations of the Applic
 4. Adding Dynamic `<BurgerIngredient />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/c0df741dc802e801a1f4118aaea57ba1e893da40)
 5. Adding `PropType` Validation for `<BurgerIngredient />`: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/47edd2792c2cdb56b2a96d1905fb89b41fca3223)
 6. Implementation of the `<Burger />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/523b225338e21b2d5c97e212db04cf5617282ed1)
+7. Outputting `<BurgerIngredients />` Dynamically: [Commit Details]()

src/components/Burger/Burger.component.jsx

@@ -6,11 +6,16 @@ import Burger from './Burger.styled';
 import BurgerIngredient from './BurgerIngredient/BurgerIngredient.component';
 
 const burger = props => {
+  const transformedIngredients = Object.keys(props.ingredients)
+    .map(ingredient => {
+      return [...Array(props.ingredients[ingredient])]
+        .map((_, index) => <BurgerIngredient key={ingredient + index} type={ingredient} />);
+    });
+  console.log(transformedIngredients);
   return (
     <Burger>
       <BurgerIngredient type="bread-top" />
-      <BurgerIngredient type="cheese" />
-      <BurgerIngredient type="meat" />
+      {transformedIngredients}
       <BurgerIngredient type="bread-bottom" />
     </Burger>
   );

src/containers/BurgerBuilder/BurgerBuilder.component.jsx

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