Clearing state es6 React

Question

I am trying to clear a components state but can\'t find a reference for the es6 syntax. I was using:

this.replaceState(this.getInitialState());

Answer 1

This is how I handle it:

class MyComponent extends React.Component{
  constructor(props){
    super(props);
    this._initState = {
        a: 1,
        b: 2
      }
    this.state = this._initState;
  }

  _resetState(){
     this.setState(this._initState);
   }
}

Update: Actually this is wrong. For future readers please refer to @RaptoX answer. Also, you can use an Immutable library in order to prevent weird state modification caused by reference assignation.

Answer 2

First, you'll need to store your initial state when using the componentWillMount() function from the component lifecycle:

componentWillMount() {
    this.initialState = this.state
}

This stores your initial state and can be used to reset the state whenever you need by calling

this.setState(this.initialState)

Answer 3

You can clone your state object, loop through each one, and set it to undefined. This method is not as good as the accepted answer, though.

const clonedState = this.state;

const keys = Object.keys(clonedState);
keys.forEach(key => (clonedState[key] = undefined));

this.setState(clonedState);

Answer 4

The solutions that involve setting this.state directly aren't working for me in React 16, so here is what I did to reset each key:

  const initialState = { example: 'example' }
  ...
  constructor() {
      super()
      this.state = initialState
  }
  ...
  reset() {
    const keys = Object.keys(this.state)
    const stateReset = keys.reduce((acc, v) => ({ ...acc, [v]: undefined }), {})
    this.setState({ ...stateReset, ...initialState })
  }

Answer 5

class x extends Components {
constructor() {
 super();
 this.state = {

  name: 'mark',
  age: 32,
  isAdmin: true,
  hits: 0,

  // since this.state is an object
  // simply add a method..

  resetSelectively() {
         //i don't want to reset both name and age
    // THIS IS FOR TRANSPARENCY. You don't need to code for name and age
    // it will assume the values in default..
    // this.name = this.name;   //which means the current state.
    // this.age = this.age;


    // do reset isAdmin and hits(suppose this.state.hits is 100 now)

    isAdmin = false;
    hits = 0;
  }// resetSelectively..

}//constructor..

/* now from any function i can just call */
myfunction() {
  /**
   * this function code..
   */
   resetValues();

}// myfunction..

resetValues() {
  this.state.resetSelectively();
}//resetValues

/////
//finally you can reset the values in constructor selectively at any point

...rest of the class..

}//class

Answer 6

This is the solution implemented as a function:

Class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = this.getInitialState();
  }

  getInitialState = () => ({
    /* state props */
  })

  resetState = () => {
     this.setState(this.getInitialState());
  }
}