HTML Lists

Introduction

In this lesson, we will build upon what we went over previously and learn how we can dynamically add and remove elements in our application through examples.

For this example, we are going to take the application code from the previous chapter. Instead of just displaying an alert when we click the “Submit” button, we will add the value in the input box to a list of displayed items. This time around, we are going to keep the HTML file and pyreact.py module the same as last time and update the app.py file as shown here.

Adding states

Most of our core React App components are the same, but we add a few things to support the list we want to build. The first thing we do is store our list items. By using the React.useState() method, we add a new state variable to our code called listItems. This also gives us the setListItems() method to use when we update the value of the listItems variable.

Adding functionality

In the function handleSubmit() that handles the onClick event of the button, we change its behavior by removing the alert we had there previously and add a code that will update our listItems state variable. We use setter functions to update them in a controlled manner and never modify them directly because React uses changes in the value of state and prop variables to know when the UI needs to be re-rendered. As such, state and prop variables are immutable, so we need to first make a copy of the current listItems state and store it in a local variable called new_list. After that, we can add the newItem value to the local copy of the list, which is then passed to the setListItems() update method to actually update the state of our App component.

Lastly, we reset the value of the newItem state variable to an empty string by using the setNewItem() update method. Whenever we call setNewItem() or setListItems() to update our state, React will automatically re-render the UI to reflect the current state of the App component when the current event completes.

We add a standard HTML ordered list element (ol) after the existing button element in the return statement of our App component. This will create a list with sequentially numbered list items. To generate the children of the ol element, we create the getListItems() function that loops through the items in our listItems state variable. Then for every item in listItems, it appends a new list item (li) element to a regular Python list. We then return that list from the function to be used as the ol element’s children.

Adding the key

Whenever you have a repeating list of React elements, you should add a key property to each element that uniquely identifies that particular element in the list. The value can be anything as long as it does not change between renders and it is not repeated anywhere else in that list. React uses this key to keep track of which elements have changed between renders to help it be as efficient as possible in determining which components need to be updated when there is a change in state.

Removing the alert import

We also remove the import for the alert function since we are no longer using it here.

Note: Run the coding widget to view the changes we have added.