pubudu-ranasinghe

import React from "react";
import { NewItem, ItemList } from "./Items";

export default function Todo() {
  return (
    <header className="App-header">
      <h2>🚀 ToDo App</h2>
      <NewItem />
      <ItemList />
    </header>

pubudu-ranasinghe

import { createContext } from "react";

const TodoContext = createContext();

export default TodoContext;

pubudu-ranasinghe

import React, { useState } from "react";
import {
  useTodoContext,
  addTodo,
  removeTodo,
  clearAll
} from "../contexts/TodoContext";

export function NewItem() {
  const [text, setText] = useState("");

pubudu-ranasinghe

import React, { createContext, useReducer, useContext } from "react";

export const TodoContext = createContext();

// Initial state
const initialItems = [
  "Extract todo state to todo context",
  "Implement todo provider"
];

pubudu-ranasinghe

import React, { useState } from "react";
import { ItemList, NewItem } from "./components/Items";
import { TodoProvider } from "./contexts/TodoContext";
import "./App.css";

function App() {
  return (
    <TodoProvider>
      <div className="App">
        <header className="App-header">

pubudu-ranasinghe

import React, { createContext, useState, useContext } from "react";

export const TodoContext = createContext();

const initialItems = [
  "Extract todo state to todo context",
  "Implement todo provider"
];

// We wrap the provider in a nice little component

pubudu-ranasinghe

import React, { useState, useContext } from "react";
import TodoContext from "../contexts/TodoContext";

export function NewItem() {
  const [text, setText] = useState("");
  // TodoContext is made available as a hook
  const todoContext = useContext(TodoContext);

  return (
    <div className="Item">

pubudu-ranasinghe

import React, { useState } from "react";
import TodoContext from "../contexts/TodoContext";

export function NewItem() {
  const [text, setText] = useState("");

  return (
    <TodoContext.Consumer>
      {values => (
        <div className="Item">

pubudu-ranasinghe

import React, { useState } from "react";
import { ItemList, NewItem } from "./components/Items";
import TodoContext from "./contexts/TodoContext";
import "./App.css";

const initialItems = [
  "Setup todo context",
  "Consume context from child components"
];

pubudu-ranasinghe

import React, { useState } from "react";

export function NewItem({ add }) {
  const [text, setText] = useState("");

  return (
    <div className="Item">
      <input
        type="text"
        placeholder="New Task"