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: Date.now(), text: action.text, completed: false }];
    case 'toggle':
      return state.map(item =>
        item.id === action.id ? { ...item, completed: !item.completed } : item
      );
    case 'remove':
      return state.filter(item => item.id !== action.id);
    default:
      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>
//     {todos.map(todo => (
//       <div key={todo.id}>
//         <input type='checkbox' checked={todo.completed} onChange={() => handleToggle(todo.id)} />
//         {todo.text}
//         <button onClick={() => handleRemove(todo.id)}>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.