#5, выведены в корзину данные о заказе

src/components/Basket/Basket.css

@@ -3,4 +3,5 @@
     border: 3px solid silver;
     min-height: 400px;
     border-radius: 10px 0 0 10px;
+    padding-top: 20px;
 }
\ No newline at end of file

src/components/Basket/Basket.js

@@ -2,11 +2,24 @@ import React from "react";
 import BasketItem from "./BasketItem/BaskeItem";
 import TotalPrice from "./TotalPrice/TotalPrice";
 import './Basket.css'
+
 const Basket = props => {
+    let basketElements = Object.keys(props.basket);
+    let emptyBasket = 'Basket empty. Please, add items';
+
+    let createBasket = () => {
+        return basketElements.map((elem, i) => {
+            return <BasketItem
+                key={'BasketItem-' + {elem} + i}
+                qty={props.basket[elem]}
+                price={props.menuList[elem].price}
+                name={elem}/>;
+        });
+    }
     return (
         <div className='Basket'>
-        <BasketItem/>
-        <TotalPrice/>
+            {basketElements.length > 0 ? createBasket() : emptyBasket}
+            {props.totalPrice > 0 ? <TotalPrice totalPrice={props.totalPrice}/> : null}
         </div>
     );
 };

src/components/Basket/BasketItem/BaskeItem.js

@@ -2,12 +2,15 @@ import React from "react";
 import './BasketItem.css'
 
 const BasketItem = props => {
-  return (
+    return (
         <div className='BasketItem'>
-          <h3> testik </h3>
-          <span> 232 KZT </span>
-          <span>x22</span> </div>
-  );
+            <h3> {props.name} </h3>
+            <div>
+                <span> {props.price} KZT </span>
+                <span> <b> x{props.qty} </b></span>
+            </div>
+        </div>
+    );
 };
 
 export default BasketItem;
\ No newline at end of file

src/components/Basket/TotalPrice/TotalPrice.css

 .TotalPrice{
     border-top: 1px solid black;
     padding-top: 10px;
+    margin-top: 10px;
 }
\ No newline at end of file

src/components/Basket/TotalPrice/TotalPrice.js

@@ -3,7 +3,8 @@ import './TotalPrice.css'
 const TotalPrice = props => {
   return (
     <div className='TotalPrice'>
-    4234234 KZT</div>
+      <span>Total price: {props.totalPrice}KZT </span>
+  </div>
   );
 };
 

src/containers/App.js

@@ -47,11 +47,12 @@ class App extends Component {
         let totalPrice = this.state.totalPrice + this.state.menu[name].price;
         this.setState({totalPrice, basket})
     };
-    render() {
 
+
+    render() {
         return (
             <div className='App'>
-                <Basket/>
+                <Basket menuList={this.state.menu} totalPrice={this.state.totalPrice} basket={this.state.basket}/>
                 <Menu menuList={this.state.menu} addElement={this.addElement}/>
             </div>
         )