ToDo List with useReducer

Implement a ToDo list where you can add, remove, and toggle tasks, showcasing how to manage an array of objects with complex interactions using useReducer.
const initialState = [];

function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, { id:, text: action.text, completed: false }];
    case 'toggle':
      return => === ? { ...item, completed: !item.completed } : item
    case 'remove':
      return state.filter(item => !==;
      throw new Error('Unknown action');
Defines the initial state of the todo list and the reducer function with actions to add, toggle, and remove todo items.
const [todos, dispatch] = React.useReducer(reducer, initialState);
Uses the useReducer hook to provide state and dispatch function for the ToDo list.
function handleAdd(text) {
  dispatch({ type: 'add', text });
Defines a function to dispatch an 'add' action with the new task text.
function handleToggle(id) {
  dispatch({ type: 'toggle', id });
Defines a function to dispatch a 'toggle' action to change the completion status of a task.
function handleRemove(id) {
  dispatch({ type: 'remove', id });
Defines a function to dispatch a 'remove' action to delete a task from the list.
// Code to render the ToDo list and buttons goes here
// Example:
// return (
//   <div>
//     { => (
//       <div key={}>
//         <input type='checkbox' checked={todo.completed} onChange={() => handleToggle(} />
//         {todo.text}
//         <button onClick={() => handleRemove(}>Remove</button>
//       </div>
//     ))}
//     <button onClick={() => handleAdd('New Task')}>Add Task</button>
//   </div>
// );
A placeholder for the component to render the ToDo list with toggle and remove options, as well as the ability to add new tasks.