codewithbernard

import React, { Component } from 'react';
import MealPlanItem from './MealPlanItem';
import _ from 'lodash';

class MealPlan extends Component {
  state = {
    meal: '',
    meals: [],
    showAddMealMessage: false
  };

codewithbernard

import React from 'react';

const MealPlanItem = (props) => {
  return <li>{props.meal} <button>Delete</button></li>;
}

export default MealPlanItem;

codewithbernard

import React from 'react';

const MealPlanItem = (props) => {
  return <li>{props.meal} <button onClick={props.handleDelete}>Delete</button></li>;
}

export default MealPlanItem;

codewithbernard

  removeMeal(mealToRemove) {
    const meals = this.state.meals.filter(meal => meal !== mealToRemove);
    this.setState({
      meals: meals
    });
  }

codewithbernard

import React, { Component } from 'react';
import MealPlanItem from './MealPlanItem';
import _ from 'lodash';

class MealPlan extends Component {
  state = {
    meal: '',
    meals: [],
    showAddMealMessage: false
  };

codewithbernard

  handleSubmit = (event) => {
    event.preventDefault()
    const meal = this.state.meal;
    if (this.state.meals.indexOf(meal) === -1) {
      this.setState({
        meals: [...this.state.meals, meal],
        meal: ""
      });
    }
  }

codewithbernard

import React, { Component } from 'react';
import MealPlanItem from './MealPlanItem';
import _ from 'lodash';

class MealPlan extends Component {
  state = {
    meal: '',
    meals: [],
    showMessage: ''
  };

codewithbernard

// Array of Strings - What we have now. Can't be considered as an option anymore
const meals = ['Spaghetti carbonara', 'Oatmeal'];

// Array of object - Can be consideres as an option , but it could be tricky to manipulate 
// We need to have in mind that we will be changing the array as it represents our state
const meals = [
  {
    title: 'Spaghetti carbonara',
    completed: false
  },

codewithbernard

import React from 'react';

const MealPlanItem = (props) => {
  return(
    <li>
      <span onClick={props.handleMealClick} >{props.title}</span>
      {props.completed || <button onClick={props.handleDelete}>Delete</button>}
    </li>
  );
}

codewithbernard

  componentWillMount() {
    this.setState({
      meals: {
        "Spaghetti carboanra": {
          completed: false
        },
        "Risotto": {
          completed: false
        },
        "Oatmeal": {