Warning: session_start(): open(/tmp/sess_9660b3d457734af13a916a4e9106f641, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Update An Object In An Array In React State - LearnShareIT

How To Update An Object In An Array In React State

Update an Object in an Array in React State

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:

Leave a Reply

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