#6, реализована возможность удаления элемента из корзины + выведены иконки (#2)

src/components/Basket/Basket.css

 .Basket {
     width: 30%;
-    border: 3px solid silver;
+    border: 3px solid darkslategrey;;
     min-height: 400px;
     border-radius: 10px 0 0 10px;
     padding-top: 20px;

src/components/Basket/Basket.js

@@ -10,10 +10,11 @@ const Basket = props => {
     let createBasket = () => {
         return basketElements.map((elem, i) => {
             return <BasketItem
-                key={'BasketItem-' + {elem} + i}
+                key={'BasketItem-' + elem + i}
                 qty={props.basket[elem]}
                 price={props.menuList[elem].price}
-                name={elem}/>;
+                name={elem}
+                removeElement={()=> props.removeElement(elem)}/>;
         });
     }
     return (

src/components/Basket/BasketItem/BaskeItem.js

@@ -8,7 +8,9 @@ const BasketItem = props => {
             <div>
                 <span> {props.price} KZT </span>
                 <span> <b> x{props.qty} </b></span>
+                <button onClick={props.removeElement}> x </button>
             </div>
+
         </div>
     );
 };

src/components/Basket/BasketItem/BasketItem.css

@@ -3,5 +3,19 @@
     justify-content: space-between;
     padding: 20px;
     align-items: center;
+}
 
+.BasketItem button {
+    padding: 6px;
+    line-height: 10px;
+    font-size: 20px;
+    color: red;
+    background: #eee;
+    border: 1px solid darkslategrey;;
+    border-radius: 5px;
+    margin-left: 10px;
+}
+
+.BasketItem button:focus {
+    outline: none;
 }
\ No newline at end of file

src/components/Basket/TotalPrice/TotalPrice.css

 .TotalPrice{
     border-top: 1px solid black;
     padding-top: 10px;
-    margin-top: 10px;
+    margin: 10px 0;
+    font-weight: bold;
+    text-transform: uppercase;
 }
\ No newline at end of file

src/components/Menu/Menu.css

 .Menu {
     width: 70%;
-    border: 3px solid silver;
+    border: 3px solid darkslategrey;
     border-radius: 0 10px 10px 0;
-    padding: 10px;
+    padding: 10px;}
 
-}
\ No newline at end of file

src/components/Menu/Menu.js

@@ -7,16 +7,14 @@ const Menu = props => {
     let createMenu = () => {
         let menuKeys = Object.keys(props.menuList);
         return menuKeys.map(key => {
-            let className = ['MenuItem'];
+           let imgUrl = './img/drink_icon.jpg';
 
-            if (props.menuList[key].type === 'drink') {
-                className.push('MenuItem_drink')
-            } else {
-                className.push('MenuItem_eat')
-            }
+           if (props.menuList[key].type === 'food') {
+               imgUrl = './img/food_icon.jpg';
+           }
 
             return <MenuItem addElem={() => (props.addElement(key))} name={key} price={props.menuList[key].price}
-                             key={'MenuItem-' + key} class={className.join(' ')}/>
+                             key={'MenuItem-' + key} img={imgUrl}/>
         });
     };
 

src/components/Menu/MenuItem/MenuItem.css

 .MenuItem {
     margin: 10px;
-    background: #ccc;
     height: auto;
-    width: 35%;
-    border: 3px solid #eee;
+    width: 320px;
+    border: 5px solid darkslategrey;
+    border-radius: 10px;
     padding: 20px 0 20px 70px;
     display: inline-block;
     cursor: pointer;
+    position: relative;
+
+}
+
+.MenuItem img {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 50px;
 }
\ No newline at end of file

src/components/Menu/MenuItem/MenuItem.js

@@ -2,9 +2,10 @@ import React from "react";
 import './MenuItem.css'
 const MenuItem = props => {
   return (
-    <div onClick={props.addElem}  className={props.class}>
-        <h3 className='MenuItem_name'> {props.name}</h3>
-        <span className='MenuItem_price'>Price: {props.price}</span>
+    <div className='MenuItem' onClick={props.addElem} >
+        <img src={props.img} width='50' height='50' alt='element_icon'/>
+        <h3> {props.name}</h3>
+        <span>Price: {props.price}</span>
     </div>
   );
 };

src/containers/App.js

@@ -8,15 +8,15 @@ class App extends Component {
         menu: {
             Hamburger: {
                 price: 200,
-                type: 'eat'
+                type: 'food'
             },
             Cheeseburger: {
                 price: 300,
-                type: 'eat'
+                type: 'food'
             },
             Fries: {
                 price: 150,
-                type: 'eat'
+                type: 'food'
             },
             Coffee: {
                 price: 70,
@@ -38,7 +38,7 @@ class App extends Component {
     addElement = (name) => {
         let basket = {...this.state.basket};
 
-        if (!basket[name]){
+        if (!basket[name]) {
             basket[name] = 1
         } else {
             basket[name]++
@@ -49,10 +49,27 @@ class App extends Component {
     };
 
 
+    removeElement = (name) => {
+        let basket = {...this.state.basket};
+
+        if (basket[name] === 1) {
+            delete basket[name]
+        } else {
+            basket[name]--
+        }
+
+        let totalPrice = this.state.totalPrice - this.state.menu[name].price;
+        this.setState({totalPrice, basket})
+    };
+
+
     render() {
         return (
             <div className='App'>
-                <Basket menuList={this.state.menu} totalPrice={this.state.totalPrice} basket={this.state.basket}/>
+                <Basket menuList={this.state.menu}
+                        totalPrice={this.state.totalPrice}
+                        basket={this.state.basket}
+                        removeElement={this.removeElement}/>
                 <Menu menuList={this.state.menu} addElement={this.addElement}/>
             </div>
         )