This article will tell you how to update an array of objects’ states in React. Some ways to do this include using the rest operator method or array.splice() method
Update an array of objects state in React
Array Object is an array containing elements, allowing access to the methods of the object inside it to meet different data processing requirements when the array only has the sole effect of taking out the elements in it. This way is used very much in reality for can save the array of the object for the access to this after.
Use the rest operator method
In this example, we will use the rest operator to add objects to the array of objects. Its effect is similar to using the standard array in that you can get the elements of the old array and add enough in the new array.
Code:
import { useState } from "react";
export default function App() {
const [people, setPeople] = useState([
{ id: 0, name: "Jack", age: 20 },
{ id: 1, name: "Tom", age: 23 },
]);
const addProfile = () => {
setPeople([...people, { id: 2, name: "Butcher", age: 21 }]);
};
return (
<>
<h2>Using a Ref to change an Element's style in React | LearnShareIT</h2>
<div>{JSON.stringify(people)}</div>
<br />
<button onClick={addProfile}>Add new</button>
</>
);
}Output:
As you can see, we have easily added a new object element to the array state using the rest operator. Or you can refer to the method below.
Using splice() method
The splice function can take multiple parameters at the same time.
Syntax:
array.splice(start, n)
Parameters:
- The first parameter is the position where a new or existing element will be added/removed. If this value is negative, that position will be counted from the bottom of the array.
- Second parameter: Number of elements to remove from the array starting from the position above. If it is 0, it will not delete any elements; if it is not passed, it will delete all elements starting from the above position.
We will use this method to get an array element by updating the array state with the removed element.
Code:
import { useState } from "react";
export default function App() {
const [people, setPeople] = useState([
{ id: 0, name: "Jack", age: 20 },
{ id: 1, name: "Tom", age: 23 },
{ id: 2, name: "Hank", age: 21 },
]);
const[inputValue,setInputValue]=useState("");
const getProfile = () => {
setPeople(people.splice(inputValue,1));
};
const handleChange=(e)=>{
setInputValue(e.target.value)
}
return (
<>
<h2>Using a Ref to change an Element's style in React | LearnShareIT</h2>
<div>{JSON.stringify(people)}</div>
<br />
<input placeholder="id" onChange={handleChange} value={inputValue}></input>
<button onClick={getProfile}>Get</button>
</>
);
}Output:
This way, we can delete an object element and return that element, and if you want to get the rest, you can learn the slice() method. Good luck!
Summary
To recap, we’ve learned two ways to update an array of objects state in React, but I recommend using various array methods to give yourself an update.
Maybe you are interested:
- How to merge two Arrays in React.js
- Get the First element of an Array in React.js
- Push an element into a state Array 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