NewTodo #
Based on the useAddTodo
hook, we create a NewTodo component.
// ./components/NewTodo.js
import React, { useState } from 'react';
import { useAddTodo } from '../hooks/useAddTodo';
import { useFlasher } from '../utils';
const NewTodo = () => {
const addTodo = useAddTodo();
const [text, setText] = useState('');
return (
<li ref={useFlasher()}>
<input
value={text}
placeholder="Enter title..."
onChange={e => setText(e.target.value)}
/>
<button
onClick={() => {
addTodo(text);
setText('');
}}
>
Add
</button>
</li>
);
};
export default React.memo(NewTodo);
Next #
In the next lesson, we will finally create a root component App
.
Get hands-on with 1400+ tech skills courses.