From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Updating arrays in state

Updating arrays in state

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Updating arrays in state

“

In this lesson, you'll learn how to efficiently manage arrays within your React state. We'll cover adding, removing, and modifying array items, focusing on best practices, and using Emmer to simplify array updates. Let's start with our basic React app. Let's install Lucide React to add some nice icons to our app. Going back to app.jsx. Now I am replacing the initial React is fun message with a more descriptive heading. I'm also applying some basic styling to make it look nicer. Now I'm importing useState from React and declaring an array of animal objects in the state. Each animal object has an ID, name, and speed property. The UseState hook allows us to manage this data within our component. To display the data, I add an UnorderedList UL element to contain the animal information. This will house the list items we'll generate later. Let's populate the unordered list. I'm using the map function to iterate over the animals array and render a list item, li, for each animal, showing its…

Contents