Let's practice your understanding of state management in React components using useState hook. We provide you with an incomplete ToDo pp and your goal is to add the following functionality:
- Add a new to-do:
- Since we did not cover forms yet, we hard-code a sample to-do item in a function and add it to the to-do list state when a button is clicked.
- Example hard-coded item:
{ id: 1, text: 'Learn React', category: 'Education', isCompleted: false }
- Mark a to-do as completed:
- Add a button for each to-do item that toggles its
isCompleted status.
- Delete a to-do:
- Add a button for each to-do item that removes it from the state.
- ⚠️ IMPORTANT: Please add
role="listitem" to the element you choose to make your list element
Once again, make sure all the tests pass!
Let's practice your understanding of state management in React components using
useState hook. We provide you with an incomplete ToDo pp and your goal is to add
the following functionality:
* Add a new to-do:
* Since we did not cover forms yet, we hard-code a sample to-do item in a
function and add it to the to-do list state when a button is clicked.
* Example hard-coded item: { id: 1, text: 'Learn React', category:
'Education', isCompleted: false }
* Mark a to-do as completed:
* Add a button for each to-do item that toggles its isCompleted status.
* Delete a to-do:
* Add a button for each to-do item that removes it from the state.
* ⚠️ IMPORTANT: Please add role="listitem" to the element you choose to make
your list element
Once again, make sure all the tests pass!
Join the discussion to ask questions, share your thoughts, and discuss with other learners
SkillPies