Update specific object value contained within an array of objects in React

Question

I currently have an array of objects. Each array of objects contains a key of checked with a value of type boolean. I am attempting to loop through the array when a user selects a certain checkbox and updating that objects checked value to either true or false. The issue I am having is spreading the updated object back into the array without creating duplicates. My code is as follows:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [arr, setArr] = useState([
    { id: 1, checked: false, name: "Person 1" },
    { id: 2, checked: true, name: "Person 2" }
  ]);

  const updateCheck = (id) => {
    const newArr = [...arr];

    const object = newArr.find((r) => r.id === id);
    const updatedObject = { ...object, checked: !object.checked };
    console.log(updatedObject);
  };

  return (
    <div className="App">
      {arr.map((r) => {
        return (
          <>
            <label>{r.name}</label>
            <input
              type="checkbox"
              checked={r.checked}
              onClick={() => updateCheck(r.id)}
            />
            <br />
          </>
        );
      })}
    </div>
  );
}

The desired effect I would like to achieve is that if Person 1's checkbox gets clicked I update their checked value to the opposite value. So Person 1 would have a checked value of true after their checkbox was clicked.

attached is a code sandbox https://codesandbox.io/s/elegant-haibt-hycmy?file=/src/App.js

CertainPerformance · Accepted Answer · 2021-04-22 22:31:22Z

3

Map the array state to create a new array state. If the item being iterated over has an ID that matches, return the updated object from the callback, otherwise return the existing item.

const updateCheck = (id) => setArr(
  arr.map(item => (
    item.id !== id ? item : { ...item, checked: !item.checked }
  ))
);

answered Apr 22, 2021 at 22:31

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Medi Over a year ago

What about if the array has 1000000 records and the one I'm looking for is in the first cell of the array?

CertainPerformance Over a year ago

The code will still work, but such large arrays generally shouldn't exist on the frontend.

Collectives™ on Stack Overflow

Update specific object value contained within an array of objects in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related