score:1

Accepted answer

there are few changes needs to be done under map method,

-> assign key to the immediate parent under map method and in your case it is label

 <label key={index}>
    ....
 </label>

-> then you have to modify the onchange value like,

<input
 type="checkbox"
 checked={cb.value}
 onchange={(e) => this.checkboxstatehandler(e,index)}
/>

here the event and index needs to passed down as an arguments.

-> then in checkboxstatehandler function get the parameters and assign the event.target.checked value to checkboxes[idx].value

  checkboxstatehandler = (event, idx) => {
    const { checkboxes } = this.state;
    checkboxes[idx].value = event.target.checked;
    this.setstate({
      checkboxes
    });
  };

the above code will get rid of all warnings and errors.

forked codesandbox here..

score:2

this will work for you:

import react from "react";
import "./styles.css";

class app extends react.component {
  state = {
    checkboxes: [
      { name: "check 1", value: false },
      { name: "check 2", value: false },
      { name: "check 3", value: false }
    ]
  };

  checkboxstatehandler = (event, idx) => {
    const { checkboxes } = this.state;
    checkboxes[idx] = {
        ...checkboxes[idx],
        value: event.target.checked,
    }
    this.setstate({
      checkboxes
    });
  };

  rendercheckboxes = () => {
    return this.state.checkboxes.map((cb, index) => (
      <label>
        {cb.name}
        <input
          type="checkbox"
          key={index}
          checked={cb.value}
          onchange={e => this.checkboxstatehandler(e, index)}
        />
      </label>
    ));
  };

  render() {
    return <div>{this.rendercheckboxes()}</div>;
  }
}

export default app;

you must send the event and index to the method in order to change the value, also checkboxstatehandler needs a little changes.


Related Query

More Query from same tag