title: How to reset the state of a React component to a previous applied state?
body: <p>I have a button that toggles a drop down menu.  Within this menu a user can toggle check-boxes, apply the changes or cancel.  </p>
  
  <p>Cancel should reset the check-boxes to the previous applied changes.</p>
  
  <p>I am struggling to reset the state of the <code>FilterMenu</code> component.  I attempted to stringify the initial state, however this has proven to be limited.</p>
  
  <p>How can reset the state of the <code>FilterMenu</code> component to the previous applied changes?</p>
  
  <p>When the user cancels:</p>
  
  <p><strong>Filter Component</strong></p>
  
  <pre><code>//close menu and reset state
  handleCancel() {    
      this.setState({menuOpen: false});
      this.props.resetState();
  }
  </code></pre>
  
  <p><code>resetState</code> is called which parses my initial state and sets it.</p>
  
  <p><strong>Main Component</strong></p>
  
  <pre><code>resetState() {
     this.setState(JSON.parse(this.baseState));
  }
  </code></pre>
  
  <h2>Snippet</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const FilterMenu = ({checkBoxes, handleChange, handleCancel, handleSave}) =&gt; {
    return (
      &lt;div&gt;
        {Object.keys(checkBoxes).map(key =&gt; {
          return (
            &lt;div key={key}&gt;
              &lt;label htmlFor={key}&gt;{checkBoxes[key].name}&lt;/label&gt;
              &lt;input
                id={key}
                type="checkbox"
                checked={checkBoxes[key].isChecked}
                onChange={handleChange}
              /&gt;
            &lt;/div&gt;
          );
        })}
        &lt;button onClick={handleCancel}&gt;Cancel&lt;/button&gt;
        &lt;button onClick={handleSave}&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  class Filter extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        menoOpen: false,
      };
  
      this.handleCancel = this.handleCancel.bind(this);
      this.handleButtonClick = this.handleButtonClick.bind(this);
    }
  
    handleCancel() {
      this.setState({menuOpen: false});
      this.props.resetState();
    }
  
    handleButtonClick() {
      this.setState({menuOpen: !this.state.menuOpen});
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.handleButtonClick}&gt;Choose Fruits&lt;/button&gt;
          {this.state.menuOpen &amp;&amp; (
            &lt;FilterMenu
              checkBoxes={this.props.checkBoxes}
              handleSave={this.props.handleSave}
              handleCancel={this.handleCancel}
              handleChange={this.props.handleChange}
            /&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  //Parent component
  class Main extends React.Component {
    constructor() {
      super();
      this.state = {
        checkBoxes: {
          1: {
            name: 'Apple',
            isChecked: true,
          },
          2: {
            name: 'Pear',
            isChecked: true,
          },
          3: {
            name: 'Tomato',
            isChecked: true,
          },
        },
        fruit: {
          1: {
            name: 'Apple',
          },
  
          3: {
            name: 'Apple',
          },
          4: {
            name: 'Pear',
          },
          5: {
            name: 'Tomato',
          },
          6: {
            name: 'Apple',
          },
        },
  
        checkedBoxes: [],
      };
  
      this.baseState = JSON.stringify(this.state);
      this.fruitFilter = this.fruitFilter.bind(this);
      this.handleSave = this.handleSave.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.resetState = this.resetState.bind(this);
    }
  
    resetState() {
      this.setState(JSON.parse(this.baseState));
    }
  
    //populates the checkedboxs array with name to filter by
    handleSave() {
      //look at the checked boxes
      //filter the fruit based on the ones that are checked`
      const checkedBoxes = Object.keys(this.state.checkBoxes)
        .filter(key =&gt; {
          //return name of fruit if it is checked
          return this.state.checkBoxes[key].isChecked
            ? this.state.checkBoxes[key].name
            : false;
        })
        .reduce((a, b) =&gt; {
          a.push(this.state.checkBoxes[b].name);
          return a;
        }, []);
  
      console.log(checkedBoxes);
      this.setState({checkedBoxes: checkedBoxes});
    }
  
    //handles the checkbox toggle
    handleChange(e) {
      const checkBoxes = {...this.state.checkBoxes};
      checkBoxes[e.target.id].isChecked = e.target.checked;
      this.setState({checkBoxes: checkBoxes});
    }
  
    //filteres the fruit - if nothing is checked return them all
    fruitFilter(fruit) {
      return Object.keys(fruit)
        .filter(key =&gt; {
          return (
            this.state.checkedBoxes.length &lt;= 0 ||
            this.state.checkedBoxes.indexOf(fruit[key].name) &gt; -1
          );
        })
        .reduce((a, b) =&gt; {
          a[b] = fruit[b];
          return a;
        }, {});
    }
  
    render() {
      const visibleFruits = this.fruitFilter(this.state.fruit);
      return (
        &lt;div&gt;
          &lt;Filter
            resetState={this.resetState}
            checkBoxes={this.state.checkBoxes}
            handleSave={this.handleSave}
            handleChange={this.handleChange}
          /&gt;
          &lt;div&gt;
            &lt;h2&gt;Filtered Fruit&lt;/h2&gt;
            {Object.keys(visibleFruits).map(key =&gt; {
              return (
                &lt;div key={key}&gt;
                  &lt;span&gt;{visibleFruits[key].name}&lt;/span&gt;
                &lt;/div&gt;
              );
            })}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Main /&gt;, document.getElementById('react'))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="react"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>