0

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?

funie200
  • 3,688
  • 5
  • 21
  • 34
Sivalakshmi
  • 33
  • 6

1 Answers1

0

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'));
Chris Ngo
  • 15,460
  • 3
  • 23
  • 46
  • Thanks Christopher, But i am expecting like below Current Val:[a,b] //items checked in screen Prev Val:[a] //value once apply is clicked - even if again checkboxes are ticked unless giving apply this should remain same – Sivalakshmi May 03 '19 at 09:38
  • Ah okay, Let me know if the updated works. With this, you shouldnt even have to worry about apply. – Chris Ngo May 03 '19 at 10:08
  • Hi, I found the solution.. The term which i am trying is shallow and deep copy in react js( just now got the those buzzwords). I am using another button to reset the content in where update is working fine. Thank you – Sivalakshmi May 04 '19 at 16:22