title: Reactjs - add/remove item from array and store using checkbox
body: <p><strong>Prerquisite</strong></p>
  
  <p>I'm fetching a list of accounts (Ajax request) which I display on page load (with a checkbox next to them). By default all the accounts are selected and added to the store (redux).</p>
  
  <p><strong>Goal</strong></p>
  
  <p>Add/remove accounts from array &amp; store (redux) when checkbox are checked/unchecked:</p>
  
  <ul>
  <li>checbox is checked --> add account to array &amp; store</li>
  <li>checkbox is unchecked --> remove account from array &amp; store</li>
  </ul>
  
  <p><strong>Logic</strong></p>
  
  <p>I created two separate actions &amp; reducers:</p>
  
  <ul>
  <li>one to manage the checkbox status</li>
  <li>one to manage the addition/removal of the account to the array &amp;
  store</li>
  </ul>
  
  <p>When testing my code, it works fine at the beginning but eventually the accounts added/removed are not correct. The issue must be in savingAccount() but not sure what I'm doing wrong?</p>
  
  <p><strong>My code</strong></p>
  
  <p>Pre-populating data to the store in ComponentWillMount():</p>
  
  <pre><code>  componentWillMount = () =&gt; {
      let defaultAccount = this.props.account
      let defaultCheckbox = this.props.checkboxStatus
  
      for(let i =0; i &lt; this.props.products.arrangements.items.length; i++){
        const data = {}
        data['id'] = i
        data['isSelected'] = true
        data['sortCode'] = this.props.products.arrangements.items[i].sortCode
        data['accountNumber'] = this.props.products.arrangements.items[i].accountNumber
        data['accountName'] = this.props.products.arrangements.items[i].accountName
        defaultAccount = defaultAccount.concat(data)
  
        const checkboxesArray = {}
        checkboxesArray['id'] = i
        checkboxesArray['checked'] = true
        defaultCheckbox = defaultCheckbox.concat(checkboxesArray)
      }
  
      this.props.addAccount(defaultAccount)
      this.props.toggleCheckbox(defaultCheckbox)
    }
  </code></pre>
  
  <p>Displaying list of accounts from Ajax response (this.props.products.arrangements.items)</p>
  
  <pre><code>render() {
    return (
      &lt;div&gt;
        {typeof(this.props.products.arrangements.items) !== 'undefined' &amp;&amp;
         (Object.keys(this.props.account).length &gt; 0) &amp;&amp;
         (typeof(this.props.checkboxStatus) !== 'undefined') &amp;&amp;
         (Object.keys(this.props.checkboxStatus).length &gt; 0) &amp;&amp;
         (Object.keys(this.props.products.arrangements.items).length &gt; 0) &amp;&amp;
          &lt;div&gt;
            {this.props.products.arrangements.items.map((item,i) =&gt;
              &lt;div className="accountContainer" key={i}&gt;
                &lt;Checkbox
                  required
                  label={"Account Number "+item.accountNumber+" Product Name "+item.accountName}
                  value={true}
                  checked={this.props.checkboxStatus[i].checked === true? true: false}
                  onChange = {(e) =&gt; {
                    this.toggleChange(this.props.checkboxStatus[i])
                    this.saveAccount(e, i, item.accountNumber, item.accountName)
                  }}
                /&gt;
                  &lt;/div&gt;
            )}
          &lt;/div&gt;
        }
        &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Updating isSelected value when checkbox is checked/unchecked:</p>
  
  <pre><code>saveAccount = (e, i, accountNumber, productName) =&gt; {
    const data = {};
    data['id'] = i
    data['accountNumber'] = accountNumber
    data['productName'] = productName
  
    if(this.props.checkboxStatus[i].checked === true){
      let accountArray = Array.from(this.props.account)
      accountArray[i].isSelected = true
      this.props.addAccount(accountArray)
    }
    else {
      let accountArray = Array.from(this.props.account)
      accountArray[i].isSelected = false
      this.props.addAccount(accountArray)
    }
  }
  </code></pre>
  
  <p>Reducer</p>
  
  <pre><code>function Eligible(state = { products: {}, account: [], checkboxStatus: [] }, action){
    switch (action.type){
      case ADD_PRODUCTS:
        return {
          ...state,
          products: action.data
        }
      case ADD_ACCOUNT:
        return {
          ...state,
          account: action.data
        }
      case TOGGLE_CHECKBOX:
        return {
          ...state,
          checkboxStatus: action.data
        }
      default:
        return state
    }
  }
  </code></pre>
  
  <p>Actions</p>
  
  <pre><code>export const ADD_PRODUCTS = 'ADD_PRODUCTS'
  export const ADD_ACCOUNT = 'ADD_ACCOUNT'
  export const TOGGLE_CHECKBOX = 'TOGGLE_CHECKBOX'
  
  export function addProducts(data){
    return {type: ADD_PRODUCTS, data}
  }
  
  export function addAccount(data) {
    return { type: ADD_ACCOUNT, data}
  }
  
  export function toggleCheckbox(data) {
    return { type: TOGGLE_CHECKBOX, data}
  }
  </code></pre>
  
  <p>Updating checkbox status:</p>
  
  <pre><code>  toggleChange = (checkbox) =&gt; {
      let toggleCheckbox = this.props.checkboxStatus
      toggleCheckbox[checkbox.id].checked = !checkbox.checked
      this.props.toggleCheckbox(toggleCheckbox)
    }
  </code></pre>