React hooks todo example

react-hooks-example.js

import React, { useState, useContext } from 'react';

const DataContext = React.createContext();

const DataProvider = (props) => {

  const [items, setItems] = useState([
    "Thing 1",
    "Thing 2",
    "Thing 3",
  ]);

  function addItem(item) {
    setItems(
      items.concat(item)
    );
  }

  function deleteItem(index) {
    setItems(
      items.filter((item, i) => i !== index)
    );
  }

  return (
    <DataContext.Provider value={{
      items,
      setItems,
      addItem,
      deleteItem,
    }}>
      {props.children}
    </DataContext.Provider>
  );
};

const Main = () => (
  <div>
    <TodoList />
    <NewTodo />
  </div>
);

const TodoList = () => {

  const data = useContext(DataContext);

  return (
    <ul>
      {data.items && data.items.map((item, index) =>
        <li key={item}>
          {item}
          <button onClick={() => data.deleteItem(index)}>Delete</button>
        </li>
      )}
    </ul>
  );
};

const useInputState = (initialValue) => {

  const [value, setValue] = useState(initialValue);

  return {
    value,
    onChange: e => {
      setValue(e.target.value);
    },
    reset: () => setValue(""),
  };
};

const NewTodo = () => {

  const data = useContext(DataContext);
  const todo = useInputState("");

  return (
    <form onSubmit={e => {
      e.preventDefault();
      data.addItem(todo.value);
      todo.reset();
    }}>
      <input
        name="todo"
        type="text"
        placeholder="New Item"
        onChange={todo.onChange}
        value={todo.value}
      />
    </form>
  );
};

class App extends React.Component {
  render() {
    return (
      <DataProvider>
        <h1>React Hooks Example</h1>
        <Main />
      </DataProvider>
    );
  }
}

export default App;