How To Update An Array Of Objects State In React

Update an array of objects state in React

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:

Leave a Reply

Your email address will not be published. Required fields are marked *