react update array of object with checked field in state

user_14822502 0
Viewed 281
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,}];

enter image description here enter image description here

reactjs javascript
3 Answers

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.

Edit hopeful-bush-qpwsye

user_163133030

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>
))}
user_80368140

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>
  );
}
user_21813970
Related