codingnninja

import React from 'react'

const AddFoodItemForm = props => {
  return (
    <form onSubmit={ props.addFoodItem } className="col-sm-4">
      <div>
        <div>
          <label className="text-white">Food name</label>
          <input type="text" name="food" value={props.food} onChange={ props.handleInputChange}/>
        </div>

codingnninja

import React from 'react';

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      id: null,
      userId: 1,
      food: '',

codingnninja

import React from 'react';
import FoodItemList from './FoodItemList';
import AddFoodItem from './AddFoodItem';
import './App.css';
import EditFoodItem from './EditFoodItem';
class App extends React.Component {

  constructor() {
    super();
    this.state = {

codingnninja

handleInputChange(event) {
  const target = event.target;
  const value = target.value;
  const name = target.name;
 
  this.setState({
    [name]:value
  })
}

codingnninja

 addFoodItem(event){
    event.preventDefault()
    if (!this.state.food) return;
    const foodItem = {
      id: this.state.foodItems.length + 1,
      food: this.state.food,
      cost: this.state.cost,
      userId: this.state.userId,
      statu: this.state.status
    };

codingnninja

render() {
    const { cost, food, foodItems, editing } = this.state;
      return (
        <div className="App">
          <div className="row App-main">
            <FoodItemList 
              foodItems= {foodItems} 
              deleteFoodItem={this.deleteFoodItem}
              boughtFoodItem={this.boughtFoodItem}
              editFoodItem={this.editFoodItem}

codingnninja

deleteFoodItem(id) {
  const foodItems = this.state.foodItems.filter( item => item.id !== id );
  this.setState({foodItems: foodItems});
}

codingnninja

editFoodItem(foodItem) {
  this.setEditing(true);
  this.setState({
    food:foodItem.food,
    cost:foodItem.cost,
    foodItem: foodItem
  });
}

setEditing(value) {

codingnninja

updateFoodItem(event) {
  event.preventDefault();
  const updatedFood = this.state.food;
  const updatedCost = this.state.cost;
  const updatedFoodItem = Object.assign({}, this.state.foodItem, { food: updatedFood, cost: updatedCost })
  const foodItems = this.state.foodItems.map((foodItem) => (foodItem.id === this.state.foodItem.id ? updatedFoodItem : foodItem));
  this.setState({ food:'', cost: '', foodItems: foodItems});
}

codingnninja

boughtFoodItem(currentFoodItem) {
  const updatedCurrentFoodItem = Object.assign({}, currentFoodItem, { status: true });
  const foodItems = this.state.foodItems.map((foodItem, index) => (foodItem.id === currentFoodItem.id ? updatedCurrentFoodItem : foodItem));
  this.setState({foodItems: foodItems})
}