To-Do List Project

State management

Previously, we used events to produce a working to-do list. The problem with this was that the to-do items were added directly to the web page and never stored anywhere in the program. This can be an issue if the program wants to know the state of the to-do list at any point. This concept is known as state management. One way to manage the state of the to-do list is to store the tasks in an array. This means that, at any point in the program, we can use the array to find any of the tasks or calculate how many tasks there are needing to be completed. And the good news is that, if you’ve been following along with all the challenges, you’ll already have some add and remove functions for arrays described previously.

Updating the to-do list code

We’re going to update the to-do list code so that it includes some state management.

Our first job is to create an array to store the tasks in. Let’s add the following code to the top of the index.js file:

const tasks = [];

Next, we need to change the function that adds a task. This is the addTask function that’s called when the form is submitted: