Outputting the Orders fetched from the Backend

README.md

@@ -81,3 +81,4 @@ Firebase Common API Endpoint: <https://burger-builder-ram.firebaseio.com/>
 8. Adding a `<Order />` Component inside `<Orders />` Container (Page): [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/a8ecf21d53600cc3fe33ef92d100eeb651acf2c2)
 9. Implementing Navigation Links using `<NavLink />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/cd28720d9650cea831ca4c4975dfeb9c09160d8f)
 10. Fetching Orders from the **[Firebase Backend](https://burger-builder-ram.firebaseio.com/orders.json)**: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/c0a5f197c56fc2b146f59d9d3fe8bc83e5361900)
+11. Outputting the Orders: [Commit Details]()

src/components/Order/Order.component.jsx

@@ -10,11 +10,36 @@ const OrderDiv = styled.div`
   box-sizing: border-box;
 `; 
 
-const order = props => (
-  <OrderDiv>
-    <p>Ingredients: Salad (1)</p>
-    <p>Price: <strong>{`$ 5.45`}</strong></p>
-  </OrderDiv>
-);
+const order = props => {
+  const ingredients = [];
+  for (let ingredientName in props.ingredients) {
+    ingredients.push({
+      name: ingredientName,
+      amount: props.ingredients[ingredientName]
+    });
+  }
+
+  const ingredientOutput = ingredients.map(ig => 
+    <span
+      style={{
+        textTransform: 'capitalize',
+        display: 'inline-block',
+        margin: '0 8px',
+        border: '1px solid #CCC',
+        padding: '5px',
+      }}
+      key={ig.name}
+    >
+      {ig.name} ({ig.amount})
+    </span>
+  )
+
+  return (
+    <OrderDiv>
+      <p>Ingredients: {ingredientOutput}</p>
+      <p>Price: <strong>${props.price.toFixed(2)}</strong></p>
+    </OrderDiv>
+  );
+};
 
 export default order;

src/containers/Orders/Orders.component.jsx

@@ -27,10 +27,16 @@ class Orders extends Component {
   }
 
   render() {
+    console.log(this.state.orders);
     return (
       <div style={{marginTop: '72px'}}>
-        <Order />
-        <Order />
+        {this.state.orders.map(order => 
+          <Order
+            key={order.id}
+            ingredients={order.ingredients}
+            price={+order.price}
+          />
+        )}
       </div>
     );
   }