This article can help you learn how to update an object in an array in React State. Follow this article to learn more about it, with the explanation and examples below. Let’s start now.
Update an object in an array in React State
Use the Spread Operator method
Spread Operator has the same syntax as Rest Paraterter, but both have different meanings. The rest Parameter is used when declaring a function, whereas Spread Operator is used in statements, expressions, or when calling a function.
We use Spread Operator with an array in this method to get the old elements of the array and concatenate them with the newly updated object to get a new array.
Code:
import React, { useState } from "react";
const App = () => {
var[employees,setEmployees] = useState([
{ id: 1, name: "John", age: 23 },
{ id: 2, name: "Jack", age: 20 },
]);
const handleUpdate = () => {
setEmployees ([...employees,{ id: 3, name: "Tom", age: 30 }]);
console.log(employees);
};
return (
<div>
<h2>Update an Object in an Array in React State | LearnShareIT</h2>
<ul>
{employees.map((employee) => (
<li>{JSON.stringify(employee)}</li>
))}
</ul>
<button onClick={handleUpdate}>Update employee</button>
</div>
);
};
export default App;
Output:
So from the old array consisting of two objects, after we press the update button, the number of elements of the array has increased to three, and the object is added to the end of the old array. We updated an object in an array in React. Or you can refer to the example below.
Use array.map() method
This way, we will use the map() method to iterate through each array element to find the object to update. The example below is the element with an id equal to “2”.
Code:
import { useState } from "react";
const App = () => {
const initState = [
{ id: 1, name: "John" },
{ id: 2, name: "Jack" },
{ id: 3, name: "Tom" },
];
const [employees, setEmployees] = useState(initState);
const handleUpdate = () => {
setEmployees((state) => {
const newState = state.map((employee) => {
if (employee.id === 2) {
return { ...employee, name: "Harry" };
}
return employee;
});
return newState;
});
};
return (
<div>
<h2>LearnShareIT</h2>
<ul>
{employees.map((employee) => {
return (
<li key={employee.id}>
<div>
id: {employee.id} name: {employee.name}
</div>
</li>
);
})}
</ul>
<button onClick={handleUpdate}>Update state</button>
</div>
);
};
export default App;
Output:
Please pay attention to the handleUpdate function. When we press the update button, the program will run to this function, and it will find the object to be updated and will replace its name attribute with “Harry” when the program sees that the employee’s state changes re-render the list <li>. So we can update the object in an array using React State. I hope these methods will be helpful to you.
Summary
These solutions can help you update an object in an array in React State. You can use the Spread Operator method or array to solve this problem.map() method . Choose the solution that is the most suitable for you. Thanks for reading!
Maybe you are interested:
- Use map() on an Array in Reverse Order in React
- Update nested properties in a State object in React
- Updating state when props change in React
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs