'update react state based on programmatic DOM changes
I have a functional react component with several controlled inputs. I want to update the state of this component when these inputs are manipulated directly through the DOM.
So for example I have this checkbox:
<input
type="checkbox"
name="checkbox"
className="delete-checkbox"
checked={isChecked}
onChange={event => setShouldDelete(sku, setIsChecked, event)
/>
where setShouldDelete is called whenever the checkbox is clicked. I would like to call it as well when something like this is executed:
checkbox.checked = true;
I understand that this is against the react idealogy of having a "single source of truth" but my code is being executed in a programmatic context (an automatic tester) and it's throwing my logic off in all sorts of ways.
Am I missing an obvious answer or how would I go about doing this? (using react hooks preferably)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
