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",…},…]

Can you create a codepen with your problem?

aquilesb
– aquilesb

2019-07-16 05:30:39 +00:00
Commented Jul 16, 2019 at 5:30 — aquilesb
– aquilesb, Commented Jul 16, 2019 at 5:30

Ram Sankhavaram · Accepted Answer · 2019-07-16 05:37:11Z

1

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!

answered Jul 16, 2019 at 5:37

Ram Sankhavaram

1,2388 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

learningMonk Over a year ago

Yes. I am trying to do that but how to do that ? If possible will you edit my code with comments?

learningMonk · Accepted Answer · 2019-07-17 05:07:00Z

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.

Collectives™ on Stack Overflow

adding mutiple items to the array using checkbox - redux react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related