How to Update the State in React JS Array using useState

Learn how to effectively update an array state in React JS with practical examples in this guide. Perfect for beginners building their first todo applications!
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: update the state in React JS array using useSatate

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Update the State in React JS Array using useState

If you’re just diving into the world of React JS and are working on a project like a todo list application, you may encounter some common challenges while trying to manage state. One recurring issue is correctly updating an array in state using the useState hook. This guide addresses a situation faced by many newcomers: getting your todo list to display correctly after adding tasks.

The Problem

You might have created your TodoList component to manage tasks, but despite successfully adding tasks to your list, they are not displaying as intended. The main issue usually stems from how you're updating the state when a new task is saved. Let's take a look at a basic setup and see where it often goes wrong.

A Glimpse at the Code

Here's a brief snippet from the TodoList and CreateTask components that illustrates the problem:

[[See Video to Reveal this Text or Code Snippet]]

In the code above, you’ll notice two critical issues:

The way of setting the state with setTaskList(...taskList, arr); is incorrect.

The task items are not returned from the .map() function.

The Solution

Now, let's dive into how we can fix these issues step-by-step so that your todo list functions as expected.

Step 1: Correctly Updating State

First, we need to ensure that we update the taskList state correctly using the prev state. Instead of directly spreading the existing array, we should utilize a function that takes the previous state into account. Here is the corrected saveTask function:

[[See Video to Reveal this Text or Code Snippet]]

This modification ensures that we always work with the most up-to-date version of taskList, effectively adding the new task while maintaining existing tasks.

Step 2: Fixing the Map Function

Next, we need to ensure that we return the JSX from the .map() function properly. Your current approach would not render anything because you’re not returning the <li> element. Here’s how we can fix that:

Proper way to render the list items:

[[See Video to Reveal this Text or Code Snippet]]

Or using shorthand:

[[See Video to Reveal this Text or Code Snippet]]

Always remember to use a unique key prop to help React identify items in the list more efficiently.

Final Thoughts

By applying these adjustments to the saveTask function and the map method, your todo list app should now correctly display tasks as they are added.

Summary

Updating State: Use a function to manage state transitions to ensure you're working with the latest data.

Rendering Lists: Ensure you return the elements from the map function, and don't forget to add key props for list items.

With these tips, you're now better equipped to handle state management in your React applications, especially when dealing with arrays using the useState hook. Happy coding!