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}
            />
          </div>
          <div className="row App-main">
          { 
            editing  ? (
            <EditFoodItemForm 
             food={this.state.food}
             cost={this.state.cost} 
             handleInputChange={this.handleInputChange}
             setEditing={this.setEditing}
             updateFoodItem={this.updateFoodItem}
            />
            ) : (
            <AddFoodItemForm 
              food={this.state.food}
              cost={this.state.cost} 
              handleInputChange={this.handleInputChange} 
              addFoodItem={this.addFoodItem}
            />
            )
          }
          </div>
        </div>
      );
    }