A reset button in ReactJS

React is a great abstraction over the DOM. It's best used to implement a self-contained world derived from a central state. For example, if you want to make a reset button, you can do something like this:

class MainComponent extends React.Component {
    constructor(props) {
        super(props);
        this.initialState = {
            someValueThatTheUserChanges: 7,
            abc: 'a'
        };
        this.state = this.initialState;
    }
    onResetClick(e) {
        e.preventDefault();
        this.setState(this.initialState);
    }
}
                

this.state is a special attribute in React that interacts with its setState() method to keep everything in sync. this.initialState is just an arbitrary place I'm storing the initial value of the world. Connect the onResetClick handler to a button like this:

<button type="button" onClick={this.onResetClick.bind(this)}>Reset</button>