Modify React Component's State using jQuery/Plain Javascript from Chrome Extension
As mentioned previously, you need to notify react about your manual changes. However, with React 16 this is not so straightforward.
const element = document.querySelector('textarea')const event = new Event('input', { bubbles: true })const previousValue = element.valueelement.value = 'next value'element._valueTracker.setValue(previousValue)element.dispatchEvent(event)Here is a working codesandbox with source code.
To see demo only you can open this link and call window.triggerChange('new value') function directly from browser dev tools console.
You'll see React's onChange and then setState events being triggered! 🎉
@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