How to set React component state and props from browser

Question

Is there a possibility to access and set the state and props of an existing React component through the browser (from inside another script or through console)?

I know there is a way with Angular to access the scope and change variables, but with React I haven't been able to find a way.

I would assume there must be some way because the React Developer Tools extension from Facebook is able to get all the information (Props, State, Component, Event Listeners) from the React components on the page, with the possibility to change them.

If there is a possibility to do this through JavaScript, which would be the way to do it?

Answer 1

If you have the React devtools extension, you can access the React scope via your browser console with $r.

First, select the component you wanna act on in the React devtools tab:

Then, use $r to act on the component, for example read state with $r.state or set state with $r.setState({ ... }) :

Answer 2

To set a react components's state from the browser, you can bind a function to the window object that will trigger the set state.

In the react component's constructor, you can do this.

constructor (props){     super(props);     window.changeComponentState = (stateObject) => {         this.setState ({stateObject});     } } 

In the browser console you can do this.

window.changeComponentState ({a:'a'}); 

WARNING: This is anti-pattern. This will work, but you should never never do this.