How to update the state to its previous state in React + Typescript

Question

I want to set the state to its previous value. I have a list of checkboxes and based on it selections and click of "Apply" the columns in the table gets shown/hidden. I am able to achieve this functionality. But on click on "Cancel" , I am not able to set it to previous state.

CodeSandbox: https://codesandbox.io/s/funny-browser-2z3s5

On click of Cancel, the checkboxes should be set to previous state.

Click is handled with a function in SelectComponent.tsx, the goal is to reset optionsArr to its original value:

cancelSelection = (event: any) => {
  this.setState({ showList: false });
  this.setState((prevState: any) => ({
    // Isn't working
    optionsArr: prevState.optionsArr
  }));
};

I voted to close because it relies on third-party content (codesandbox) that is subject to change/removal. If this happens, this question will not make sense, thereby eliminating any usefulness to future users. It also means that there are minimal code-related search terms in you question, reducing the ability of search engines to index your question. Please present your code using the tools provided by SO, considering this and this for guidance. — spender
– spender, Commented Jun 26, 2019 at 10:39

ekuusela · Accepted Answer · 2019-06-26 10:54:13Z

1

The argument that setState updater gets is state at the time the change is being applied. Setting state equal to that changes nothing.

You need to keep track of previous state separately. For example as separate item in the state, an instance variable or the props. See for example:

Reset initial state in React + ES6

Clearing state es6 React

edited Jun 26, 2019 at 10:54

answered Jun 26, 2019 at 10:37

ekuusela

5,3421 gold badge28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to update the state to its previous state in React + Typescript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related