Making use of `useReducer` React hook for managing the state of the functional component

Todo.js

import React, { useReducer } from 'react';

const reducer = (state, action) => {
    switch(action.type) {
        case 'add': {
            return [
                ...state,
                {
                    id: Date.now(),
                    text: '',
                    completed: false
                }
            ]
        }
        default: {
            return state;
        }
    }
}

function Todo() {

    const [state, dispatch] = useReducer(reducer, []);

    return (
        <>
            <h1>Todo App</h1>
            <button onClick={() => dispatch({ type: 'add' })}>Create</button>
            { state.map(item => (
                <div key={item.id}>{item.id}</div>
            ))}
        </>
    );
}

export default Todo;