From the course: React Hooks

Unlock the full course today

Join today to access over 24,400 courses taught by industry experts.

Solution: Building an interactive to-do list

Solution: Building an interactive to-do list - React.js Tutorial

From the course: React Hooks

Start my 1-month free trial Buy for my team

Solution: Building an interactive to-do list

“

(upbeat music) - [Instructor] We have the skeleton here for our task list. So we have our initialTasks array and we have our UI that's being rendered already, but we need to make some adjustments to this to include some hooks so that we can start to manage this array of tasks and we can update them. So what we want to do here is we're going to create the TaskItem component first. So here inside of the div, we're going to add an input. It will have a type of checkbox, and then we'll have a closing input here. Then we're going to add a few other properties. First, we'll add checked, which will be task.completed, and then we'll have onChange. So the onChange event is going to have some sort of function set to it. We'll write that in a second. Then we'll add an id this time with the backticks. We'll pre-append task dash and then plug in the task.id. Then next to this input, we will add a label and then another label. What this should read inside of the label is task.name, and then we'll…

Contents