score:0

const PermissionsPage = () => {

 const [modules, setModules] = useState([]);
 const [checkModules, setCheckModules] = useState([]); //state to control the checkboxes 'checked' propertie

 useEffect(() => {
  api.get('/modules').then(res => {
    setModules(res.data.modules);
    setCheckModules(
     res.data.modules.map(m => ({
       id: m.id,
       name: m.name,
       features: m.features.map(f => ({ id: f.id, name: f.name, checked: false }))
       }))
     );
  }
 });

 const handleChange = (m,f,e) => {
  let temp = [...checkModules]; //that's the point. You need to take the state as a new array;
  temp[m].features[f].checked = !temp[m].features[f].checked;
  setCheckModules(temp);
 }

return (){
  <div>
    {checkModules.map((module, m) => (
      <div>
      <span>{module.name}</span>
      {checkModules[m].features.map((feature, f) => (<checkbox onChange={() => handleChange(m,f)} checked={feature.checked}/>))}
      </div>
    )}
  </div>
}
}

Related Query

More Query from same tag