Taco Provider

TacoProvider.js

import React from "react";

// 1.- instantiate the context
// note: you could do import React, { createContext} from "react"
// and use only createContext(); and will work as well
export const TacoContext = React.createContext();

// this can be a service in another file, returning promises, etc ...
const proteins = ["🐄", "🐙", "🐓", "🥦", "🐷"];
const vegetables = ["🥑", "🍅", "🥕", "🥒"];
const spicyness = ["🌶", "🌶🌶", "🌶🌶🌶", "🌶🌶🌶🌶", "mexican level"];

const randomChoice = ingredients =>
  ingredients[Math.round(Math.abs(Math.random() * ingredients.length - 1))];

export default class TacoProvider extends React.Component {
  state = {
    cheff: "🦊",
    setCheff: cheff => this.handleChangeCheff(cheff),
    getProtein: () => randomChoice(proteins),
    getVegetable: () => randomChoice(vegetables),
    getSpicyness: () => randomChoice(spicyness)
  };

  handleChangeCheff(cheff) {
    this.setState({ cheff });
  }

  render() {
    return (
      <TacoContext.Provider value={this.state}>
        {/* ^ expose state via the Provider, the 
        property "value" can have any name, no necessarily value */}
        {this.props.children}
      </TacoContext.Provider>
    );
  }
}

TacoProviderApp.js

import React from "react";
import TacoProvider, { TacoContext } from "./TacoProvider";

class TacoMaker extends React.Component {
  state = {
    taco: null
  };

  makeMagic = ({ getProtein, getVegetable, getSpicyness }) => {
    return (
      <span>
        Your taco has: protein: {getProtein()}, vegetables: {getVegetable()}{" "}
        spicyness level: {getSpicyness()}
      </span>
    );
  };

  handleClick = context => () => {
    this.setState({ taco: this.makeMagic(context) });
  };

  render() {
    return (
      <TacoContext.Consumer>
        {context => {
          return (
            <React.Fragment>
              <button onClick={this.handleClick(context)}>
                Do magic cheff {context.cheff}
              </button>
              {this.state.taco}
            </React.Fragment>
          );
        }}
      </TacoContext.Consumer>
    );
  }
}

class TacoCheff extends React.Component {
  render() {
    return (
      <TacoContext.Consumer>
        {context => (
          <React.Fragment>
            <label>cheff:</label>
            <input
              type="text"
              onChange={event => context.setCheff(event.target.value)}
            />
            <hr />
          </React.Fragment>
        )}
      </TacoContext.Consumer>
    );
  }
}

export default class TacoApp extends React.Component {
  render() {
    return (
      <TacoProvider>
        <TacoCheff />
        <TacoMaker />
      </TacoProvider>
    );
  }
}