Select specific checkbox based on index in React using onChange

Question

I have a list where I'm iterating though every item and it has a checkbox to select a particular list item. The problem I'm facing now is, when I select one item, it checks all the items in the list. How do I check only particular item that is selected?

Excerpt from my code

export default function App() {
  const [checked, setChecked] = useState(false);
  const names = ["John", "Doe", "Jim"];
  const handleCheck = (event, index) => {
    console.log(event.target.checked);
    console.log(index);
    setChecked(event.target.checked);
    return event.target.checked;
  };
  return (
    <div className="App">
      {names.map((values, index) => (
        <div>
          <input
            type="checkbox"
            checked={checked}
            onChange={(event) => handleCheck(event, index)}
          />
          {values}
        </div>
      ))}
    </div>
  );
}

I created a working example using CodeSandbox. Could anyone please help?

topdev87 · Accepted Answer · 2021-02-05 02:09:03Z

2

You are passing the input tag checked value with one state boolean variable.

Make checked state as an array and indicate it using index for input tag.

On handleCheck() method, update the corresponding index item of the state.

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

export default function App() {
  const [allchecked, setAllchecked] = useState(false);
  const [checked, setChecked] = useState([false, false, false]);
  const names = ["John", "Doe", "Jim"];
  const handleCheck = (event, index) => {
    const _checked = [...checked];
    _checked[index] = event.target.checked;
    setChecked(_checked);
  };

  const selectAll = (event) => {
    setAllchecked(event.target.checked);
    const isChecked = event.target.checked;
    console.log(isChecked);
    setChecked([isChecked, isChecked, isChecked]);
  };
  return (
    <div className="App">
      <input type="checkbox" checked={allchecked} onChange={selectAll} />
      Select All
      {names.map((values, index) => (
        <div>
          <input
            type="checkbox"
            checked={checked[index]}
            onChange={(event) => handleCheck(event, index)}
          />
          {values}
        </div>
      ))}
    </div>
  );
}

edited Feb 5, 2021 at 2:09

answered Feb 5, 2021 at 1:41

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

4 Comments

scriobh Over a year ago

This is great! With this approach, will I be able to mark all as true when select all button is clicked? setChecked((checked) => checked.map((values) => !values)); I did something like this which won't check the select All checkbox.

topdev87 Over a year ago

simply, just setChecked([true, true, true])

scriobh Over a year ago

But the select All checkbox won't get checked :( I updated my code in the sandbox link. Could you please take a look.

topdev87 Over a year ago

since "selectAll" is the another checkbox, you need to add another state for this.

Collectives™ on Stack Overflow

Select specific checkbox based on index in React using onChange

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related