1

I have a list of checkboxes where each is an individual functional component. There is a reset button which is expected to set all checkboxes to be unchecked.

I am using context to store checked data values. I am using the following logic to update each checkbox when reset button is clicked.

Button.tsx

onResetClicked = () => {
  context.data = []
}

Checkbox.tsx

React.useEffect(()=> {
  if(context.includes(props.data)){
    setIsChecked(true);
  } else {
    setIsChecked(false);
  }
}, [context]);

I expect the useEffect will be called when reset button is clicked and this will reset all checkboxes to be unchecked. However, there is a long delay before check marks disappear or only when hovering over checkbox, the check marks will disappear.

Does anybody know what this problem is and how to solve it?

Thanks

Helen
  • 11
  • 1

1 Answers1

0

For anyone else that might come across this problem, the issue was in Button.tsx where context was being set. Instead of updating context with context.data=[] a setter should be used instead. That way React will know when context is updated.

Justin Dehorty
  • 1,383
  • 1
  • 15
  • 26