27

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?

3
  • 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, 2015 at 15:05
  • Well. Still. How "look at facebook/react-devtools" is not an answer?
    – Xan
    May 13, 2015 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. May 13, 2015 at 18:01

3 Answers 3

26

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

5
  • This is not possible with latest React Tool 4.4.0 anyone know a way with the new devtools? Feb 25, 2020 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 1, 2020 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, 2021 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, 2022 at 17:39
  • This answer appears to be specific to a brand (maybe even version) of browser.
    – moonman239
    2 days ago
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.

1
  • 7
    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, 2017 at 8: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.

1
  • 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, 2015 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.