Cancel to retain previous state is not working - reactjs

Question

I have apply and cancel button with list of checkeboxes.
Once apply is clicked the selected/checked value should get stored in state prevVal variable.
On seleting some other check box and clicking cancel should make checkbox to get populated with prevVal
But on clicking cancel currentValue is getting populated.
I am using a temporary variable to hold the current state on handle checkbox event.
After I push value to a temporary variable my state is getting auto updated with the temporary value.
Could anyone help me with this?

Answer 1

I think this is what youre looking for :)
Also here is the sandbox if you want to see the functionality: https://stackblitz.com/edit/react-pmdgir?file=index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
prevVal: [],
currentVal: [],
filter: [
{
key: 'a'
},
{
key: 'b'
},
{
key: 'c'
}
]
}
}
toggleCurrentVal = (key) => {
const currentVal = this.state.currentVal
const beforeSlicedVal = []
if(currentVal.includes(key)){
currentVal.splice(currentVal.indexOf(key), 1)
} else {
currentVal.push(key)
}
this.setState((prevState) => {
const prevStateValue = prevState.prevVal.length <= currentVal.length ? prevState.currentVal.filter((val) => val !== key) : prevState.prevVal
return {
currentVal: currentVal.sort(),
prevVal: prevStateValue
}
}, () => console.log("currentValue:"+ this.state.currentVal + " preValue: " + this.state.prevVal ))
}
applyFilter = () => {
console.log("currentValue:"+ this.state.currentVal + " preValue: " + this.state.prevVal )
}
cancel = () => {
this.setState({
currentVal: [],
prevVal: this.state.currentVal
}, () => console.log("currentValue:"+ this.state.currentVal + " preValue: " + this.state.prevVal ))
}
render() {
let checkboxes = [];
let checkedValues = this.state.currentVal
if (this.state.filter) {
this.state.filter.map(data => {
checkboxes.push(
<div><input type="checkbox" checked={checkedValues.includes(data.key)}name="a" value={data.key} onClick={() => this.toggleCurrentVal(data.key)}></input></div>
)
})
}
return (
<div>
{checkboxes}
<button onClick={this.applyFilter}>Apply</button>
<button onClick={this.cancel}>Cancel</button>
</div>)
}
}
render(<App />, document.getElementById('root'));