Modify React Component's State using jQuery/Plain Javascript from Chrome Extension

I am building a tiny Chrome Extension for my own personal use.

In Facebook's ads manager(Uses React) i want to change a textarea field's value to a value generated by my chrome extension.

i tried it doing the old fashion way like this

document.querySelector('textarea').value = myValue;


this changes the value on screen but in chrome's inspect element the value doesn't change and when i focus on the input element value resets.

Here is the picture of how react component looks like:

Here is the picture of this react components props & states:

In above component i want to change the state.displayValue to my value.

how it can be done?

The question is widely applicable to a large audience. A detailed canonical answer is required to address all the concerns.

1 Answer
1

@Bandal react needs to be notified that the inputs value has changed. You will need to dispatch a change event after you have updated the value.

document.querySelector('textarea').value = myValue;
const event = new Event('input', { bubbles: true })
document.querySelector('textarea').dispatchEvent(event)


Original answer here

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.