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        however this does not work with the es6 class syntax      How would I achieve the same result

User · Answer

In some circumstances  it s sufficient to just set all values of state to null   If you re state is updated in such a way  that you don t know what might be in there  you might want to use  this setState Object assign    Object keys this state  map k   gt     k   null        Which will change the state as follows   foo  1  bar  2  spam   whatever    gt   foo  null  bar  null  spam  null    Not a solution in all cases  but works well for me

User · Answer

class MyComponent extends Component    constructor props     super props     this state          inputVal  props inputValue           preserve the initial state in a new object    this baseState   this state      resetForm        gt        this setState this baseState

User · Answer

To the best of my knowledge  React components don t keep a copy of the initial state  so you ll just have to do it yourself   const initialState            etc        class MyComponent extends Component       constructor props            super props          this state   initialState            reset             this setState initialState                etc        Beware that the line this state   initialState  requires you never to mutate your state  otherwise you ll pollute initialState and make a reset impossible  If you can t avoid mutations  then you ll need to create a copy of initialState in the constructor   Or make initialState a function  as per getInitialState      Finally  I d recommend you use setState   and not replaceState

User · Answer

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

User · Answer

const initialState         a          b          c         class ExampleComponent extends Component       state        initialState      use spread operator to avoid mutation     handleReset   this handleReset bind this        handleReset              this setState initialState              Remember that in order to be able to reset the state it is important not to mutate initialState    state       initialState     GOOD       gt  state points to a new obj in memory which has the values of initialState  state   initialState    BAD       gt  they point to the same obj in memory   The most convenient way would be to use ES6 Spread Operator  But you could also use Object assign instead  They would both achieve the same   state   Object assign     initialState      GOOD state       initialState      GOOD

User · Answer

This is the solution implemented as a function   Class MyComponent extends React Component     constructor props        super props       this state   this getInitialState           getInitialState        gt            state props            resetState        gt         this setState this getInitialState

User · Answer

I will add to the above answer that the reset function should also assign state like so   reset       this state   initialState    this setState initialState       The reason being that if your state picks up a property that wasn t in the initial state  that key value won t be cleared out  as setState just updates existing keys   Assignment is not enough to get the component to re-render  so include the setState call as well -- you could even get away with this setState     after the assignment

User · Answer

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

User · Answer

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

User · Answer

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    gt        acc   v   undefined             this setState      stateReset     initialState

User · Answer

use deep copy  you can do it with lodash  import   from  quot lodash quot    const INITIAL STATE        constructor props        super props       this state     cloneDeep INITIAL STATE      reset         this setState   cloneDeep INITIAL STATE

User · Answer

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   gt   clonedState key    undefined     this setState clonedState

User · Answer

In most cases you dont need a deep copy  rarely initial state is object of objects  so using spread operator which babel transpiles to the object assign should be fine    So  inside constructor you would have       class MyComponent extends Component           constructor props                super props              this state                     key  value                  key2  value                           this initialState        this state                      From there you can use   this setState this initialState     to reset  But if for some reason your initial state is more complex object  use some library

User · Answer

Problem  The accepted answer   const initialState            etc        class MyComponent extends Component       constructor props            super props          this state   initialState            reset             this setState initialState                etc        unfortunately is not correct   initialState is passed as a reference to this state  so whenever you change state you also change initialState  const doesn t really matter here   The result is that you can never go back to initialState   Solution  You have to deep copy initialState to state  then it will work  Either write a deep copy function yourself or use some existing module like this

[javascript] Clearing state es6 React

Examples related to javascript

Examples related to reactjs

Examples related to react-state