NewTodo Component

NewTodo #

import React, { useState } from 'react';

import { useDispatch } from './store';
import { useFlasher } from './utils';

const NewTodo = () => {
  const dispatch = useDispatch();
  const [text, setText] = useState('');
  const addTodo = () => {
    dispatch({ type: 'ADD_TODO', title: text });
    setText('');
  };
  return (
    <li ref={useFlasher()}>
      <input
        value={text}
        placeholder="Enter title..."
        onChange={e => setText(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
    </li>
  );
};

export default React.memo(NewTodo);

This component has a local state, text, for a text field. The local state is created with the React basic hook useStat. Only when a button is clicked, will it dispatch an action to the store.

Next #

In the next lesson, we finish up our app.