adding mutiple items to the array using checkbox - redux react

Question

In my application there is a list of items. In each item there is a checkbox. From that list item if i check multiple items and click to add button 'Add checked' Those selected item will be added to another list. I have created the action and reducer function for that it is working fine. But, it is adding only last checked single item

I have tried to store all checked item into one array based on mruCode(id) then onClick button function to invoke whole array into another.But, it is sending only single item .

action code :(so far i have tried how to determine checkboxstate action into add)

export const checkboxState = mruCode =>({
  type: GET_CHECKBOX,
  payload : mruCode
});

export const checkedLocation = () =>({
  type: GET_CHECKED_LOCATION
});

reducer function(adding operation)

case 'GET_CHECKBOX':
        let newState1 = Object.assign({},state)
        let newList = newState1.location.filter((obj)=>obj.mruCode===action.payload)
        return Object.assign({},newState1,{
            isChecked: newList
        });

        case 'GET_CHECKED_LOCATION':
          return{
              ...state,
              conLocations:[...state.isChecked]
          }    

Component code :

export class NewLocationPanel extends React.Component{
    constructor(props){
        super(props);
        this.state={
               open:false,
               configuredList:[]
        };
       this.configLocation = this.configLocation.bind(this);
        this.togglePanel = this.togglePanel.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.allLocations = this.allLocations.bind(this);
        this.clearall = this.clearall.bind(this);
        this.getLocationData = this.getLocationData.bind(this);
        this.handleRemove = this.handleRemove.bind(this);
        this.removeConfigLocation = this.removeConfigLocation.bind(this);
        this.removeLocationAll = this.removeLocationAll.bind(this);
        this.handleChecklocation = this.handleChecklocation.bind(this);
        this.handleCheckedAdded = this.handleCheckedAdded.bind(this);
    }

    // there is other code

    handleChecklocation(mruCode){
        this.props.checkboxState(mruCode)
    }

    handleCheckedAdded(){
        this.props.checkedLocation()
    }

    componentDidMount() {
        this.props.loadData();
        if(this.props.locationData !=null && this.props.locationData!= undefined){
            this.configLocation(this.props.locationData);
        }
      }

    componentDidUpdate(prevProps,prevState){
        if (prevProps.locationData != this.props.locationData){ 
            this.configLocation(this.props.locationData);
        }
    }

   //there are other non-related function

    render(){
        //const{configuredList} = this.state;
        const _labels = store.getLabels();
        let collapsedToggle = this.props.open ? 'collapsed' : ''
        return(
            <div className="panel panel-default">
            <div className="panel-heading" onClick={(e)=>this.togglePanel(e)}>
              <div className="row">
              <div className="col-xs-12 col-sm-8 col-md-6 col-lg-6 panelHeadingLabel">
                     <span>{this.props.title}</span>
                     </div>
                        <div className="pull-right">
                        <span className="defaultHeaderTextColor">{this.state.configuredList.map((loc,index)=><span key={index}>{loc.mruCode} - {_labels[loc.division]} - {loc.country}{index < this.state.configuredList.length-1 ?',\u00A0' : ''}</span>)}
                           <span onClick={(e)=>this.togglePanel(e)} className={this.state.open ? "collapse-chevronn" : "collapse-chevron"} aria-hidden="true"></span>
                   </span>
                    </div>
                </div>
           </div>
              {this.state.open?(
                        <div className="panel-body">
                             <div className="row grid-divider">
                             <div className="col-sm-6">
                             <div className="col-padding"><div className="pos-div"><h3>Locations List</h3><button className="submitSmallBtn1"  onClick={()=>this.handleCheckedAdded()}>Add Checked</button><button style={{ display: this.props.location.length === this.props.conLocations.length ? "none" : "block" }} className="allLargeBtn" onClick={()=>{this.allLocations()}}>Add all locations</button></div><hr/>
                             {this.props.location.map((item,index)=>(
                             <div key={index}><div><input type="checkbox" onClick={()=>this.handleChecklocation(item.mruCode)}/><label></label><b>{item.mruCode} - {_labels[item.division]} - {item.country}</b>{!this.props.conLocations.find(item2 => item.mruCode === item2.mruCode)&&(<div className="pull-right jd"><button style={{ display: this.state.configuredList.find(item3=> item.mruCode===item3.mruCode) ? "none" : "block" }} className="call-to-action" onClick={()=>{this.handleClick(item.mruCode)}}>Add Location</button></div>)}<hr/></div></div>))}
                            </div>
                             </div> 
                                  </div> 
                    </div>):null}
            </div>

        );
    }
}

const mapStateToProps = state =>{
    return{
        location:state.locationRed.location,
        conLocations:state.locationRed.conLocations,
        isChecked:state.locationRed.isChecked
    };
};

const mapDispatchToProps = (dispatch) => {
    return{
        loadData:()=>{dispatch(loadData())},
        addLocation:(mruCode)=>{dispatch(addLocation(mruCode))},
        addAllLocation:() =>{dispatch(addAllLocation())},
        removeLocation: (mruCode)=>{dispatch(removeLocation(mruCode))},
        removeAllLocation: () =>{dispatch(removeAllLocation())},
        checkboxState: (mruCode) =>{dispatch(checkboxState(mruCode))},
        checkedLocation:() =>{dispatch(checkedLocation())}

    }
}


export default connect(mapStateToProps,mapDispatchToProps,null,{withRef:true})(NewLocationPanel);

In component, there is a 'Add checked' button by which add operation will happen based on selected items. If i select two items only 2nd item is adding to the other list.

Initial location list is like :[{mruCode: "7300", country: "AUSTRALIA", state: "Queensland", division: "Engineering",…},…]

Answer 1

I have found the solution for this after many trials. I created action for storing checked items into a list after filtering them then send that list directly by dispatching button action event. action code:

 export const checkboxState = mruCode =>({

type: GET_CHECKBOX, payload : mruCode });

export const checkedLocation = () =>({ type: GET_CHECKED_LOCATION });

reducer function

case 'GET_CHECKBOX':
    let newList = state.location.filter(obj=>obj.mruCode===action.payload)
    let addedItems = state.isChecked.concat(newList)
    return{
         ...state,
         isChecked:addedItems
    }
    case 'GET_CHECKED_LOCATION':
      return{
          ...state,
          conLocations:[...state.isChecked]
      }    

Now it working fine. Problem was in my actions previously.

Answer 2

I understand that you have multiple checkboxes in the list. Once the entire selection is done, and then "Add Checked" button is clicked you wanted to store the selected items.

This can be done in other way, instead of dispatching the action on every check/uncheck of the checkbox, we can store the checked status of each checkbox in the component state.

You can use the event.target.checked (handle change) method to track the selected checkboxes, store them in the state.

On click of "Add Checked" button, dispatch the action and send the entire selected list to the reducer. Hope this helps!