Component re-render on state change not happening

Question

I have a react app similar to what is shown in this codesandbox link https://codesandbox.io/s/eatery-v1691

Clicking the Menu at the bottom center of the page renders the MenuFilter component.

The MenuFilter component in turn uses a checkbox component to render several check boxes & the checked status of these checkboxes depends on the selectedMeals prop that I pass to the MenuFilter in app.tsx .

I read that when the state is passed as a prop, the re-rendering happens as soon as the state changes but this is not happening.

The selectedMeals state is initialized with allItems and then managed such that when any other items is click, that items is set & allItems and these individual items can be several at once. The state management works fine but the checkbox is not getting updated based on the state!

If you however, click cancel (ok button does not do anything yet) & then click Menu button again, only the values in the selectedMeals prop are rendered.

See the video here ( https://youtu.be/Zmfc0MQGaIU this is the full app, codesandbox app is representation of this but not the same) where the state change (allItems gets removed & when allItems is checked other items get removed) works perfectly but the check boxes are not re-rendering appropriately

What am I doing wrong & more importantly how do I get the result I want?

I initially put the question here re-render as soon as the state is changed but there was no sandbox for it & since the sandbox is different from what I put in that question, I created a new question. Thanks.

In this video https://youtu.be/2v3lOPaIPzU I have captured the change in the selectedMeals in console log & I also show how the checkboxes does not match the selectedMeals .

Answer 1

The problem is in the Checkbox component.

const [checked, setChecked] = useState(isChecked);

isChecked will only be used as the initial value, checked will not update every time isChecked changes. You could manually update checked in a useEffect hook with isChecked as a dependency, but it is unnecessary as the Checkbox component can be implemented without any state.

If you however, click cancel (ok button does not do anything yet) & then click Menu button again, only the values in the selectedMeals prop are rendered.

That's because the modal is conditionally rendered based on menuModalIsShown and when this boolean gets toggled, the component unmounts and mounts back causing useState(isChecked) to use the updated state.

---

Updated Checkbox :

export const CheckBox = ({
  standAlone,
  text,
  onCheck,
  isChecked,
  value
}:
CheckBoxProps) => {
  return (
    <div
      className={`${styles.checkbox} ${
        standAlone ? "" : styles.notStandAlone
      } `}
    >
      <input
        type="checkbox"
        checked={isChecked}
        onChange={onCheck}
        value={value}
      />
      <label htmlFor={styles.checkbox}>{text}</label>
    </div>
  );
};