26

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?

Decor
  • 548
  • 1
  • 7
  • 20
  • 1
    As is, it's too broad to answer, and "Is there a possibility" is answered with a "yes" in the question proper. – Xan May 13 '15 at 15:05
  • Well. Still. How "look at [facebook/react-devtools](https://github.com/facebook/react-devtools)" is not an answer? – Xan May 13 '15 at 15:12
  • What are you trying to do (or more importantly, why)? I think the tools just set props/state directly and then force an update on the component. You shouldn't use this technique as part of an application. – WiredPrairie May 13 '15 at 18:01

3 Answers3

25

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:

enter image description here

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

enter image description here

samzmann
  • 2,286
  • 3
  • 20
  • 47
  • This is not possible with latest React Tool 4.4.0 anyone know a way with the new devtools? – Xwris Stoixeia Feb 25 '20 at 15:11
  • @XwrisStoixeia I version 4.8.2 of the React Dev Tools and I can still use this option in the console. – Ali Zaidi Aug 01 '20 at 12:36
  • `setState()` wasn't working for my particular situation, but I was still able to modify the state property directly. Just remember to trigger a rerender if you do it this way. – Tyler Auer Mar 16 '21 at 22:36
  • I am building a chrome extension, do I need to package the react dev tool inside my extension to call the method setState on the methods? – rbansal Jun 29 '22 at 17:39
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.

Singwai
  • 47
  • 1
  • 4
  • 4
    Same problem as the other answer. This isn't about React components you have control over. It's about injecting code in a page with pre-existing React components - where you can't change constructors. – Xan Sep 19 '17 at 08:14
-3

To set the state from your browser, stick this somewhere in your component, like in render():

  globalSetState = function(state){this.setState(state)}.bind(this);

Note: It's important to leave off the var, as this is what makes the defined function globally accessible.

You can now call globalSetState({x: 'y'}) in your console.

Warning: This is mad ugly, and, like console.log() for debugging, should be deleted in your live app.

eye_mew
  • 8,855
  • 7
  • 30
  • 50
  • 2
    Er, you don't understand the question. It's a question about setting state of components that you did not author, overriding them using a Chrome Extension. – Xan May 14 '15 at 10:00