codewithbernard

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

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

  renderMeals() {

codewithbernard

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

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

  renderMeals() {

codewithbernard

{
  "meals": ["Eggs with bacon", "Spaghetti carbonara", "Oatmeal"]
}

codewithbernard

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

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

  renderMeals() {

codewithbernard

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

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

codewithbernard

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

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

codewithbernard

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

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

codewithbernard

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

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

codewithbernard

import React from 'react';

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

export default MealPlanItem;

codewithbernard

import React, { Component } from 'react';

class MealPlanItem extends Component {
  render() {
      return <li>{this.props.meal}</li>;
  }
}

export default MealPlanItem;