TodoList with useReducer

In this project you will be making a simplified todo list using useReducer hook.

Inside reducers/todo.js, implement your reducer logic inside the todo reducer function. Only add actions for adding and deleting a todo.

In AddTodo.js file implement the component AddTodo.

  • This will be the form for adding the todo, Give the form id="todo-form".
  • Inside it make an input element with id "todo-input" which takes the title of todo.
  • The actual todo object will only have two properties, one title and another id which should be autogenerated when user submits todo-form(Date.now() will provide a good enough id for this use case).
  • Then finally a button of type submit for adding the todo to list
  • After successfully adding the todo reset the form fields.

In Todo.js file implement Todo component which will show individual todo

  • Todo will have class "todo"
  • Inside that make a div with class todo-title to display the title of todo
  • Make a button with class todo-delete which upon clicking removes that todo from list of todo