[Solved]-How to set React component state and props from browser-Reactjs

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.

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.

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({ ... }) :