Filter out existing objects in an array of objects

Question

I don't think this is difficult, I just can't figure out the best way to do it. This function is creating an array, from a group of checkboxes. I then want to break up the array and create an array of objects, because each object can have corresponding data. How do I filter out existing rolesInterestedIn.roleType.

handleTypeOfWorkSelection(event) {
    const newSelection = event.target.value;
    let newSelectionArray;

    if(this.state.typeOfWork.indexOf(newSelection) > -1) {
      newSelectionArray = this.state.typeOfWork.filter(s => s !== newSelection)
    } else {
      newSelectionArray = [...this.state.typeOfWork, newSelection];
    }
    this.setState({ typeOfWork: newSelectionArray }, function() {
      this.state.typeOfWork.map((type) => {
        this.setState({
          rolesInterestedIn: this.state.rolesInterestedIn.concat([
            {
              roleType: type,
            }
          ])
        }, function() {
          console.log(this.state.rolesInterestedIn);
        });
      })
    });
  }

UDPATE

rolesInterestedIn: [
  {
    roleType: '',
    experienceYears: ''
  }
],

what's the issue with this code? is it not working as you expecting, it will be better if you provide sample data, what you are expecting and what the result this method is producing. — Mayank Shukla
– Mayank Shukla, Commented Jul 9, 2017 at 4:52
rolesInterestedIncreates new objects each time I select or unselect a checkbox. I don't want it to just concat I want it to check for duplicates then update if required, by adding or removing the selection. — bp123
– bp123, Commented Jul 9, 2017 at 4:54

Mayank Shukla · Accepted Answer · 2017-07-09 07:34:27Z

1

Because each time you do setState you are concatenating the new value to the prev one in rolesInterestedIn array. Add new value only when you are adding new item, otherwise remove the object from both the state variable typeOfWork and rolesInterestedIn.

Try this:

handleTypeOfWorkSelection(event) {
    const newSelection = event.target.value;
    let newSelectionArray, rolesInterestedIn = this.state.rolesInterestedIn.slice(0);

    if(this.state.typeOfWork.indexOf(newSelection) > -1) {
        newSelectionArray = this.state.typeOfWork.filter(s => s !== newSelection);
        rolesInterestedIn = rolesInterestedIn.filter(s => s.roleType !== newSelection)
    } else {
        newSelectionArray = [...this.state.typeOfWork, newSelection];
        rolesInterestedIn = newSelectionArray.map((workType) => {
            return {
                roleType: workType,
                experienceYears: '',
            }
        });
    }
    this.setState({
         typeOfWork: newSelectionArray,
         rolesInterestedIn: rolesInterestedIn  
    });
}

Suggestion: Don't use multiple setState within a function, do all the calculation then use setState once to update all the values in the last.

edited Jul 9, 2017 at 7:34

answered Jul 9, 2017 at 5:01

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

7 Comments

bp123 Over a year ago

Cool. I don't think I'm implementing this correctly. Should this work with the update I've added?

Mayank Shukla Over a year ago

need to change something, tell me one thing what will be the initial value of experienceYears with each roleType in rolesInterestedIn array?

bp123 Over a year ago

Initial state will be null. The user will select it in another section.

Mayank Shukla Over a year ago

yes it should work, check the updated answer, we need to add experienceYears also when adding the roleTypes :)

bp123 Over a year ago

Unless I'm reading this wrong, this doesn't setState of rolesInterestedIn.

|

Collectives™ on Stack Overflow

Filter out existing objects in an array of objects

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related