codewithbernard

  renderMeals() {
    return _.map(this.state.meals, (value, key) =>
      <MealPlanItem
        handleMealClick={() => this.completeMeal(key)}
        handleDelete={() => this.removeMeal(key)}
        title={key}
        completed={value.completed} />
      );
  }

codewithbernard

  completeMeal(mealToComplete) {
    const meals = this.state.meals;
    if (!meals[mealToComplete].completed) {
      meals[mealToComplete].completed = true;
      this.setState({
        meals: meals
      });
    }
  }

codewithbernard

  removeMeal(mealToRemove) {
    const meals = this.state.meals;
    delete meals[mealToRemove];
    this.setState({
      meals: meals
    });
  }

codewithbernard

  handleSubmit = (event) => {
    event.preventDefault()
    const { meals, meal } = this.state;
    if (!meals[meal]) {
      meals[meal] = { completed: false };
      this.setState({
        meals: meals,
        meal: ""
      });
      this.showMessage('New meal added')

codewithbernard

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

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

codewithbernard

import React from 'react';

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

codewithbernard

import React from 'react';

const MealPlanItem = (props) => {
  return(
    <li>
      <span
        style={{
          marginBottom: "14px",
          paddingTop: "32px"
        }} 

codewithbernard

.meal-title {
  margin-bottom: 14px;
  padding-top: 32px;
}

codewithbernard

import React from 'react';
import './MealPlanItem.css';

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

codewithbernard

.meal-striked {
  text-decoration: line-through;
}