react update array of object with checked field in state

Question

const data = [
    {

      id: "1",
      checked: false,
    },
    {
      id: "2",
      checked: false,
    },
    {
      id: "3",
      checked: false,
    },
    {
      id: "4",
      checked: false,
    },
  ];

const [state, setState] = useState(data)

{state.map((item, index) => (
   <div key={index}>
     <input checked={item.checked} type="checkbox" />
     <span>{item}</span>
   </div>
))}

How could I update the checked whenever the checkboxes are tick and untick?

Some examples, but I would like the items checked are to be an array like [{id: "1",checked: true,},{id: "2",checked: true,}];

mc-user · Accepted Answer · 2022-05-04 05:07:27Z

2

You can add onClick to the input and update your state data based on the selected item.

const handleChange = (id) => {
  const clonedData = [...state];
  setState(
    clonedData.map((d) => (d.id === id ? { ...d, checked: !d.checked } : d))
  );
};

//// Your remaining code 


<input
  checked={item.checked}
  type="checkbox"
  onClick={() => handleChange(item.id)}
/>;

Attached is a sandbox for reference.

answered May 4, 2022 at 5:07

mc-user

2,1114 gold badges17 silver badges30 bronze badges

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

Comments

Andus · Accepted Answer · 2022-05-04 05:16:28Z

1

Given the data you gave us as the state, you can create a copy of the state and toggle the one you have tiggered the checking.

const [state, setState] = useState(data)

const handleChange = (id) = {
    const newState = state.map(item => item.id === id? {...item, state: !item.checked} : item)
    setState(newState)
}

{state.map((item, index) => (
   <div key={index}>
     <input checked={item.checked} type="checkbox" onChange={(e) => handleChange(item.id)}/>
     <span>{item}</span>
   </div>
))}

answered May 4, 2022 at 5:16

Andus

1,73917 silver badges33 bronze badges

Comments

brk · Accepted Answer · 2022-05-04 05:10:47Z

You can create a new function and on change update the previous state

export default function App() {
  const data = [
    {
      id: '1',
      checked: false,
    },
    {
      id: '2',
      checked: false,
    },
    {
      id: '3',
      checked: false,
    },
    {
      id: '4',
      checked: false,
    },
  ];
  const [state, setState] = React.useState(data);
  function updateState(id) {
    const newVal = state.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          checked: !item.checked,
        };
      } else {
        return {
          ...item,
        };
      }
    });
    setState(newVal);
  }

  return (
    <div>
      {state.map((item, index) => (
        <div key={index}>
          <input
            checked={item.checked}
            type="checkbox"
            onChange={() => updateState(item.id)}
          />
          <span>{item.id}</span>
        </div>
      ))}
    </div>
  );
}

Collectives™ on Stack Overflow

react update array of object with checked field in state

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related