score:10

Accepted answer

The problem is in updateFeaturesList, you are mutating the state directly in this line listFeatures[ idx ].checked = e.target.checked, the state reference stay the same and so react does not know if it should re-render.

What you can do is copy the state, before changing it :

const updateFeaturesList = ( e,idx ) =>
{

    const newFeatures = [...listFeatures];
    newFeatures[ idx ].checked = e.target.checked
    setListFeatures( newFeatures )
    console.log( "Updated features list",newFeatures,e.target.checked )
}

score:0

React state will trigger render only if value changed in state. Modifying or pushing values to array wont change the array reference, here react state uses array reference to decide whether to trigger render or not.so here array is modifying but reference is not changing

solution: copy your array to new array and set to state will solve issue

score:2

You're mutating the original state in your updateFeaturesList function. Use the functional form of setState to update your current feature list:

const updateFeaturesList = (e, idx) => {
  const { checked } = e.target;
  setListFeatures(features => {
    return features.map((feature, index) => {
      if (id === index) {
        feature = { ...feature, checked };
      }

      return feature;
    });
  });
};

Also note that calling console.log("Updated features list", newFeatures,e.target.checked) immediately after setting the state won't show the updated state, since setting state is async.


Related Query

More Query from same tag