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