Handle multiple checkboxs Reactjs not working?

Question

I am trying to create multiple checkboxes with reactjs. But it not working what I did I do wrong? I have a state array set false to check each checkbox. I think it works but it didn't work How I fix it?

Thank you!

const GridResource = (resources) => {

  const [checked, setChecked] = useState([...Array(6)].map(x=>false));

  const handleCheckboxChange = (index) => {
      checked[index] = !checked[index];
      setChecked(checked);
  };


  const rows = [];
  resources.map((resource, index)=> {
    rows.push(
        <HeaderTable >
         <ChecboxGrid>
          <label>
           <Checkbox
               checked={checked[index]}
               onChange={()=> handleCheckboxChange(index)}
           />
          </label>
         </ChecboxGrid>

         <TagElement> {resource.firstName}</TagElement>
         <TagElement title={true}> {resource.lastName} </TagElement>
         <TagElement title={true}> {resource.jobtitle} </TagElement>
        </HeaderTable>
    )
  });

  return (

      <Container>
       <HeaderTable>

        <ChecboxGrid>
         <label>
          <Checkbox
              checked={checked}
              onChange={handleCheckboxChange}
          />
         </label>
        </ChecboxGrid>
       </HeaderTable>
       {rows}
      </Container>
  )
};

Zohaib Ijaz · Accepted Answer · 2020-04-16 14:49:09Z

1

Don't mutate the state, create a copy so React can re-render

const handleCheckboxChange = (index) => {
     const copy = [...checked];
     copy[index] = !copy[index];
     setChecked(copy);
};

answered Apr 16, 2020 at 14:49

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Handle multiple checkboxs Reactjs not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related