component: provide the hint when there is no ingredients by merging multiple arrays into one

src/components/Burger/Burger.js

@@ -5,13 +5,19 @@ import BurgerIngredient from './BurgerIngredient/BurgerIngredient';
 
 const burger = (props) => {
 
-    const transformedIngredients = Object.keys(props.ingredients)
+    let transformedIngredients = Object.keys(props.ingredients)
     .map(igKey => {
         return [...Array(props.ingredients[igKey])].map( (_, i) => {
             return <BurgerIngredient key={igKey + i} type={igKey} />;
         })
-    });
+    })
+    .reduce((arr, el) => { // merge multiple arrays into one
+        return arr.concat(el);
+    }, []);
 
+    if (transformedIngredients.length === 0){
+        transformedIngredients = <p>Please start adding ingredients</p>;
+    }
     return (
         <div className={classes.Burger}>
             <BurgerIngredient type="bread-top" />

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -7,10 +7,10 @@ class BurgerBuilder extends Component {
 
     state = {
         ingredients: {
-            meat: 1,
-            cheese: 1, 
-            salad: 2,
-            bacon: 2,
+            meat: 0,
+            cheese: 0, 
+            salad: 0,
+            bacon: 0,
         }
     }