title: React Multiple checkboxes are behaving oddly with confirm and cancel functionality added to the state
body: <p>I am having a weird issue:
  I have a button called assign and when I click on it, a modal with userslist(checkboxes) opens
  This modal has a confirm and cancel button. THe buttons functionality should be such as
  When I click on confirm, the checked or unchecked data(no matter what selection is made) should save and when I click on cancel any data should revert back to confirmed(saved) data.
  I have built my component such that when loading initially, I am copying the state and then the 'copystate' changes are saved to original state when confirmed and when cancelled, original state changes are copied to 'copystate'.
  But what is happening is the state is getting updated no matter what change I make in the copystate. and the copystate and original state are having the same data.</p>
  
  <p>Can somebody help me with this:
  Below is my render method:</p>
  
  <pre><code>render() {
      const ready = this.state.ready;
      return (
        &lt;div&gt;
          {ready &amp;&amp;
            this.state.data.addOnProducts.map((val, idx) =&gt; {
              const userListIndex = val.indexOf()
              return (
                &lt;div key={idx}&gt;
                  &lt;button className={`btn btn--rounded btn--assign`} onClick={() =&gt; this.openModal(idx)}&gt;
                    {'assign'}
                  &lt;/button&gt;
                  {this.state.showModal &amp;&amp; (
                    &lt;CheckboxList
                      key={idx}
                      list={this.state.newData.addOnProducts[this.state.currentAddOnIndex].usersData.usersList}
                      selectHandler={this.assignHandler}
                      //label={this.state.newData.addOnProducts[this.state.currentAddOnIndex].usersData.usersList}
                    /&gt;
                  )}
                &lt;/div&gt;
              );
            })}
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>Below is my assign handler:</p>
  
  <pre><code>assignHandler(idx) {
      const newData = Object.assign({}, this.state.newData);
      console.log('state list',this.state.newData.addOnProducts[this.state.currentAddOnIndex].usersData.usersList);
      console.log('newData list',this.state.newData.addOnProducts[this.state.currentAddOnIndex].usersData.usersList);
      newData.addOnProducts[this.state.currentAddOnIndex].usersData.usersList.map((user, index) =&gt; {
        if (index === idx) {
          user.selected = !user.selected;
        }
       return user;
      });
      this.setState(
      {
        newData: Object.assign({}, newData)
      }, function() {
        console.log('state list',this.state.data.addOnProducts[this.state.currentAddOnIndex].usersData.usersList);
        console.log('newData list',this.state.newData.addOnProducts[this.state.currentAddOnIndex].usersData.usersList);
      });
    };
  </code></pre>
  
  <p>This is Cancel Method:</p>
  
  <pre><code>cancelAssignUsers() {
          const stateUsersList = Object.assign({}, this.state.data.addOnProducts[this.state.currentAddOnIndex].usersData);
          const newDataCopy = Object.assign({}, this.state.newData);
      console.log(stateUsersList.usersList);
          newDataCopy.addOnProducts[this.state.currentAddOnIndex].usersData.usersList = stateUsersList.usersList;
      console.log(newDataCopy.addOnProducts[this.state.currentAddOnIndex].usersData.usersList);
          this.setState({
            showModal: false,
            newData: Object.assign({}, newDataCopy)
          });
    }
  </code></pre>
  
  <p>this is my confirm method:</p>
  
  <pre><code>confirmAssignUsers() {
      const newDataUsersList = Object.assign(
        {},
        this.state.newData.addOnProducts[this.state.currentAddOnIndex].usersData
      );
      const stateCopy = Object.assign({}, this.state.data);
      stateCopy.addOnProducts[this.state.currentAddOnIndex].usersData.usersList = newDataUsersList.usersList;
  console.log(stateCopy.addOnProducts[this.state.currentAddOnIndex].usersData.usersList);
      this.setState({
        showModal: false,
        data: Object.assign({}, stateCopy)
      });
    }
  </code></pre>