JavaScript | React: Todo List

Published: 15 January 2021
on channel: Mace

Source: https://github.com/ethan-mace/Coding-...

Challenge: Todo List
Ah, the todo list! A ubiquitous project for any respectable JavaScript framework. Your job is to create a small React application to store and modify a list of tasks. Each task will have a text string as well as a completed property, which will be set to false initially. As you check off items, they should appear slashed out on the page. Using what you know about state and iterating through lists, render a list of items, and give the user the option to remove each item and add new ones. There are different ways to implement the remove function. One way to do it is using the built-in filter method. Filter returns a new array when invoked and is a great way to stay true to the functional nature of React.

Hint: When updating the state, make sure to send in a brand new object or array; otherwise React won't update the view.

☑️ Iterate through the existing tasks using the map method.
☑️ Allow the user to add a new task, initially set to not completed.
☑️ Allow the user to remove a task by clicking the delete button.
☑️ Allow the user to toggle a task's completion property by clicking the checkbox next to it.
☑️ Ninja Bonus: When updating the tasks' state, don't mutate the current task objects or the current task list.
☑️ Sensei Bonus: Persist the todos list on page refreshes. Hint, consider combining the browser's localStorage with the useEffect hook.

On this page of the site you can watch the video online JavaScript | React: Todo List with a duration of hours minute second in good quality, which was uploaded by the user Mace 15 January 2021, share the link with friends and acquaintances, this video has already been watched 46 times on youtube and it was liked by 0 viewers. Enjoy your viewing!

10,063

262