Connecting state to each <BuildControl/> Component

- Adding `onClick` handler to the `More` button.

README.md

@@ -23,3 +23,5 @@ NOTE: There can be more additions into the design, over iterations of the Applic
 8. Calculating the `<BurgerIngredient />` Sum Dynamically using `reduce()`: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/0be94dfd71b0280de5aa7f1ff2233fe5ac65c685)
 9. Adding the `<BuildControl />` & `<BuildControls />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/2c9be483093bc2f9015799e04844cda739f5d699)
 10. Outputting Multiple `<BuildControl />` components using the `<BuildControls />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/ab893618efaf7013c49acc06cdb1b11d8af72d29)
+11. Connecting `state` to each `<BuildControl />` & `<BuildControls />` Component
+    1. Adding `onClick` handler to the `More` button: [Commit Details]()

src/components/Burger/BuildControls/BuildControl/BuildControl.component.jsx

@@ -8,7 +8,7 @@ const buildControl = props => (
   <BuildControl>
     <Label>{props.label}</Label>
     <button className="Less">Less</button>
-    <button className="More">More</button>
+    <button className="More" onClick={props.added}>More</button>
   </BuildControl>
 );
 

src/components/Burger/BuildControls/BuildControls.component.jsx

@@ -14,7 +14,13 @@ const controls = [
 
 const buildControls = props => (
   <BuildControls>
-    {controls.map(control => <BuildControl key={control.label} label={control.label} />)}
+    {controls.map((control) => (
+      <BuildControl
+        key={control.label}
+        label={control.label}
+        added={() => props.ingredientAdded(control.type)}
+      />
+    ))}
   </BuildControls>
 );
 

src/containers/BurgerBuilder/BurgerBuilder.component.jsx

@@ -6,21 +6,47 @@ import Aux from '../../hoc/Auxiliary/Auxiliary.hoc';
 import Burger from '../../components/Burger/Burger.component';
 import BuildControls from '../../components/Burger/BuildControls/BuildControls.component';
 
+const INGREDIENT_PRICES = {
+  salad: 0.5,
+  cheese: 0.4,
+  meat: 1.3,
+  bacon: 0.7
+}
+
 class BurgerBuilder extends Component {
   state = {
     ingredients: {
       salad: 0, 
       bacon: 0,
       cheese: 0,
       meat: 0
-    }
+    },
+    totalPrice: 4
+  };
+
+  addIngredientHandler = type => {
+    const oldCount = this.state.ingredients[type];
+    const updatedCount = oldCount + 1;
+    const updatedIngredients = { ...this.state.ingredients };
+    updatedIngredients[type] = updatedCount;
+
+    const priceAddition = INGREDIENT_PRICES[type];
+    const oldPrice = this.state.totalPrice;
+    const newPrice = oldPrice + priceAddition;
+
+    this.setState({
+      totalPrice: newPrice,
+      ingredients: updatedIngredients
+    });
   };
 
   render() {
     return (
       <Aux>
         <Burger ingredients={this.state.ingredients}/>
-        <BuildControls />
+        <BuildControls
+          ingredientAdded={this.addIngredientHandler}
+        />
       </Aux>
     );
   }