How to capture a value change made on the DOM in React
So you, like myself, have a weird scenario where you need to mutate the DOM directly in React. Why else would you have found this oddly specific blog post? It’s okay, I’ve got you. You’re in good hands now.
I won’t dive too deep into why this was required, but the top-level is… we are using a Google Tag Manager to set hidden fields in a controlled form.
This all seems fine and dandy, but when you manipulate the DOM on page load and then type into the input fields, the form’s state overwrites the newly-updated values.
tl;dr? The controlled form isn’t being told that the values changed. It looks a little something like this:
My problem is, we are using a third party to set the hidden field’s values by manipulating the DOM. I don’t know exactly how it works, but it functions by doing something along these lines:
To put it quite bluntly, if it were up to me, we wouldn’t be using this third party software, but part of being a Software Engineer is learning how to get around seemingly tricky coding problems like this!
