component: add OrderSummary modal component

src/components/Burger/OrderSummary/OrderSummary.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Aux from '../../../hoc/Auxiliary';
+
+const orderSummary = (props) => {
+    const ingredients = Object.keys(props.ingredients)
+        .map(igKey => {
+            return (
+                <li key={igKey}>
+                    <span style={{ textTransform: 'capitalize' }}>{igKey}:</span> {props.ingredients[igKey]}
+                </li>
+            )
+        });
+
+    return (
+        <Aux>
+            <h3>Your Order</h3>
+            <p>A delicious burger with the following ingredients:</p>
+            <ul>
+                {ingredients}
+            </ul>
+            <p>Continue to Checkout?</p>
+        </Aux>
+    )
+};
+
+export default orderSummary;

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -4,6 +4,7 @@ import Aux from '../../hoc/Auxiliary';
 import Burger from '../../components/Burger/Burger';
 import BuildControls from '../../components/Burger/BuildControls/BuildControls';
 import Modal from '../../components/UI/Modal/Modal';
+import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary';
 
 const INGREDIENT_PRICE = {
     salad: 0.4,
@@ -87,7 +88,9 @@ class BurgerBuilder extends Component {
 
         return (
             <Aux>
-                <Modal />
+                <Modal>
+                    <OrderSummary ingredients={this.state.ingredients}></OrderSummary>
+                </Modal>
                 <Burger ingredients={this.state.ingredients}  />
                 <BuildControls 
                     ingredientAdded={this.addIngredientHandler}