#4, реализована возможность добавления элемента в корзину

src/components/Menu/Menu.js

@@ -3,9 +3,26 @@ import MenuItem from "./MenuItem/MenuItem";
 import './Menu.css'
 
 const Menu = props => {
+
+    let createMenu = () => {
+        let menuKeys = Object.keys(props.menuList);
+        return menuKeys.map(key => {
+            let className = ['MenuItem'];
+
+            if (props.menuList[key].type === 'drink') {
+                className.push('MenuItem_drink')
+            } else {
+                className.push('MenuItem_eat')
+            }
+
+            return <MenuItem addElem={() => (props.addElement(key))} name={key} price={props.menuList[key].price}
+                             key={'MenuItem-' + key} class={className.join(' ')}/>
+        });
+    };
+
     return (
         <div className='Menu'>
-      <MenuItem/>
+            {createMenu()}
         </div>
     );
 };

src/components/Menu/MenuItem/MenuItem.css

@@ -4,6 +4,7 @@
     height: auto;
     width: 35%;
     border: 3px solid #eee;
-    padding: 20px 0 ;
-    padding-left: 70px;
+    padding: 20px 0 20px 70px;
+    display: inline-block;
+    cursor: pointer;
 }
\ No newline at end of file

src/components/Menu/MenuItem/MenuItem.js

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

src/containers/App.js

@@ -35,13 +35,24 @@ class App extends Component {
         basket: {}
     };
 
+    addElement = (name) => {
+        let basket = {...this.state.basket};
 
+        if (!basket[name]){
+            basket[name] = 1
+        } else {
+            basket[name]++
+        }
+
+        let totalPrice = this.state.totalPrice + this.state.menu[name].price;
+        this.setState({totalPrice, basket})
+    };
     render() {
 
         return (
             <div className='App'>
                 <Basket/>
-                <Menu/>
+                <Menu menuList={this.state.menu} addElement={this.addElement}/>
             </div>
         )
     }