container: connect state to BuildControls, attach ingredient addition logic on More button

src/components/Burger/BuildControls/BuildControl/BuildControl.js

@@ -4,9 +4,9 @@ import classes from './BuildControl.css';
 
 const buildControl = (props) => (
     <div className={classes.BuildControl}>
-        <div className={classes.Label}>{props.Name}</div>
+        <div className={classes.Label}>{props.name}</div>
         <button className={classes.Less}>Less</button>
-        <button className={classes.More}>More</button>
+        <button className={classes.More} onClick={props.added}>More</button>
     </div>
 )
 

src/components/Burger/BuildControls/BuildControls.js

@@ -13,7 +13,10 @@ const controls = [
 const buildControls = (props) => (
     <div className={classes.BuildControls}>
         {controls.map( ctrl => (
-            <BuildControl Key={ctrl.name} Name={ctrl.name} />
+            <BuildControl 
+            key={ctrl.name} 
+            name={ctrl.name} 
+            added={() => props.ingredientAdded(ctrl.type) }/>
         ))}
     </div>
 )

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -4,6 +4,13 @@ import Aux from '../../hoc/Auxiliary';
 import Burger from '../../components/Burger/Burger';
 import BuildControls from '../../components/Burger/BuildControls/BuildControls';
 
+const INGREDIENT_PRICE = {
+    salad: 0.4,
+    bacon: 0.8,
+    cheese: 0.5,
+    meat: 1.3,
+};
+
 class BurgerBuilder extends Component {
 
     state = {
@@ -12,14 +19,36 @@ class BurgerBuilder extends Component {
             cheese: 0, 
             salad: 0,
             bacon: 0,
+        },
+        totalPrice: 0,
     }
+
+    addIngredientHandler = (type) => {
+        const oldCount = this.state.ingredients[type];
+        const newCount = oldCount + 1;
+        const updatedIngredient = {
+            ...this.state.ingredients,
+        };
+        updatedIngredient[type] = newCount;
+
+        const priceAddition = INGREDIENT_PRICE[type];
+        const newPrice = this.state.totalPrice + priceAddition;
+        this.setState({
+            totalPrice: newPrice,
+            ingredients: updatedIngredient,
+        });
+    }
+
+    removeIngredientHandler = (type) => {
+
     }
 
     render() {
         return (
             <Aux>
                 <Burger ingredients={this.state.ingredients}  />
-                <BuildControls />
+                <BuildControls 
+                    ingredientAdded={this.addIngredientHandler} />
             </Aux>
         );
     };