Merge pull request #16 from markerikson/patch-1

Rewrite App.js to use ES6 syntax

Author: acco

client/src/App.js

@@ -1,45 +1,39 @@
-import React from 'react';
+import React, {Component} from 'react';
 import SelectedFoods from './SelectedFoods';
 import FoodSearch from './FoodSearch';
 
-const App = React.createClass({
-  getInitialState: function () {
-    return {
-      selectedFoods: [],
-    };
-  },
-  render: function () {
+class App extends Component {
+  state = {
+      selectedFoods : []
+  }
+    
+  removeFoodItem = (itemIndex) => {
+      const filteredFoods = this.state.selectedFoods.filter( (item, idx) => itemIndex !== idx);
+      this.setState({selectedFoods : filteredFoods});
+  }
+    
+  addFood = (food) => {
+      const newFoods = this.state.selectedFoods.concat(food);
+      this.setState({selectedFoods : newFoods});
+  }
+    
+  render() {
+    const {selectedFoods} = this.state;
+        
     return (
       <div className='App'>
         <div className='ui text container'>
-          <SelectedFoods
-            foods={this.state.selectedFoods}
-            onFoodClick={
-              (idx) => (
-                this.setState({
-                  selectedFoods: [
-                    ...this.state.selectedFoods.slice(0, idx),
-                    ...this.state.selectedFoods.slice(
-                      idx + 1, this.state.selectedFoods.length
-                    ),
-                  ],
-                })
-              )
-            }
+	        <SelectedFoods
+	          foods={selectedFoods}
+            onFoodClick={this.removeFoodItem}
           />
           <FoodSearch
-            onFoodClick={
-              (food) => (
-                this.setState({
-                  selectedFoods: this.state.selectedFoods.concat(food),
-                })
-              )
-            }
+            onFoodClick={this.addFood}
           />
         </div>
       </div>
     );
-  },
-});
+  }
+}
 
 export default App;