How to remove element from array after uncheck of checkbox

Question

I am having multiple locations, on check of the particular location i can able to push those into array on check of checkbox unable to remove from array

handleChange(e){
    if(e.target.checked){
        let selectedLocations = this.state.selectedLocations;
        selectedLocations.push({
            name: e.target.name,
            isActive: true
        });
        this.setState({
            selectedLocations: selectedLocations
        });
    }else{
        let selectedLocations = this.state.selectedLocations;

    }


}

{
 locations && locations.map((el, i) => {
   return (
         <div className="col-md-4">
         <div className="form-group">
         <input type="checkbox" value="true"  name={el.name} onChange={this.handleChange.bind(this)}/><label> &nbsp;{el.name} </label>
      </div>
  </div>
 )
})
}

I want to remove from array after unchecking particular location

you have set a state in else condition, since you are using same selectedLocations ur result gets unchanged, also you need to consider locations should be updated in sync with selectedLocations, I assume because you have not posted the complete code. — Darpan Rangari
– Darpan Rangari, Commented Sep 25, 2019 at 11:55

marc_s · Accepted Answer · 2019-09-29 21:08:30Z

1

You shouldn't try to mutate the state by pushing directly to state. I would suggest try something similar like below

handleChange(e){
    if(e.target.checked){
        this.setState(({selectedLocations}) => ({
            selectedLocations: [...selectedLocations, {
            name: e.target.name,
            isActive: true
        }]
        }));
    } else {
        this.setState(({selectedLocations}) => ({
            selectedLocations: selectedLocations.filter((element) =>  (e.target.name !== element.name))
        }));
    }
}

edited Sep 29, 2019 at 21:08

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 25, 2019 at 11:58

Nithin Thampi

3,7091 gold badge16 silver badges14 bronze badges

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

1 Comment

SeanDemps Over a year ago

this is what my answer would be, except there are just a couple of issues (which I assume are just from overlooking when copy pasting): the const selectedLocations... will not be available in the else block. Also, I believe it would be better practice to use the callback syntax inside setState instead of setting a const from state. (that is:

this.setState(({selectedLocations}) => ({ selectedLocations:selectedLocations.filter((element) =>  (e.target.name !== element.name))}));

and same idea for the first setState )

Raj Gohel · Accepted Answer · 2019-09-25 11:55:34Z

0

Try to pass map index with function and split that index value from an array.

answered Sep 25, 2019 at 11:55

Raj Gohel

1,1109 silver badges16 bronze badges

Comments

Nathanael Demacon · Accepted Answer · 2019-09-25 12:04:38Z

0

You can use .filter(). I'm assuming that the name property is unique but you can also store a key to be more precise:

this.setState({
  selectedLocations: selectedLocations.filter(l => l.name !== e.target.name)
});

edited Sep 25, 2019 at 12:04

answered Sep 25, 2019 at 11:56

Nathanael Demacon

1,2179 silver badges19 bronze badges

1 Comment

Nithin Thampi Over a year ago

@Nathanael, I think answer should be updated to l.name !== e.target.name. The person who downvoted didn't bother to correct you I believe :).

Sachin Metkari · Accepted Answer · 2019-09-25 12:11:24Z

0

Use lodash remove function

handleCheckboxChange = (e, id) => {
  const { selected_ids } = this.props;
  let updated_selected_ids = [];
  if (e.target.checked) {
    updated_selected_ids = selected_ids.concat([id]);
  } else {
    updated_selected_ids = remove(selected_ids, n => n !== id);
  }
}

If you don't want to use lodash you can use filter method as well.

handleCheckboxChange = (e, id) => {
  const { selected_ids } = this.props;
  let updated_selected_ids = [];
  if (e.target.checked) {
   updated_selected_ids = selected_ids.concat([id]);
 } else {
   updated_selected_ids = selected_ids.filter(function(n){ return n !== id })
}

edited Sep 25, 2019 at 12:11

answered Sep 25, 2019 at 12:00

Sachin Metkari

1043 bronze badges

Collectives™ on Stack Overflow

How to remove element from array after uncheck of checkbox

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related