We had made a nonfunctional Todo application as we had used props to store the data. This time we will create a new Todo application using state variables.

We will start by creating the basic format of the Todo application, along with two state variables:

We will create two state variables, text and todos.

Here todos is supposed to be an array containing <li> elements representing the Todos. By default, the todos array is empty. The text variable is supposed to be the input value of the <input> element. We’ve put {todos} inside the <ul> elements so that the data is automatically displayed when the array is populated.

We've also set the value attribute of the <input> element to {text}.

If we try typing anything in the input text, nothing will appear in the input box as the value attribute of the input box is set to text and text is set to an empty string.

We will fix that by writing a handleChange function for the <input> element:

Now if we try running the application, it should look like this:

If you click Add Item it will refresh the page, and nothing will change. We want to add logic for that. We will create a new function for handling the submit action.

Using preventDefault method prevents the page reload. We will append a new <li> element to the todos array every time the Add Item button is clicked, but only if the text is not an empty string.

We will also set the text value to an empty string at the end to clear the input field. In code, it will look something like this:

Now if you check the application, you should be able to add items, and it should appear in the form of a list: