Skip to content

Instantly share code, notes, and snippets.

Last active November 3, 2019 10:09
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
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"
function App() {
const [items, setItems] = useState(initialItems);
function handleAddItem(item) {
setItems([...items, item]);
function handleRemoveItem(index) {
const copy = [...items];
copy.splice(index, 1);
// We wrap the entire application with TodoContext provider, so that it
// provides the value defined here(items and handlers) to the entire component heirachy
// Now we don't need to pass the props to NewItem and ItemList
return (
value={{ items, add: handleAddItem, remove: handleRemoveItem }}
<div className="App">
<header className="App-header">
<h2>🚀 ToDo App</h2>
<NewItem />
<ItemList />
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment