target array by passing argument in function in js/react

Question

I have an object to collect data to send to an API:

apiData: {
    colors: [],
    years: [],
    // ..
}

Many of the children of this apiData are arrays like colors and years, I call these 'subgroups'. A user can select a multitude of subgroups with checkboxes that trigger:

handleCheckboxColorChange(value, isChecked) {
    let newApiData = '';
    this.setState( (prevState) => {
        if (isChecked === true) {
            newApiData = {...prevState.apiData, colors: [...prevState.apiData.colors, value]}
        } else {
            newApiData = {...prevState.apiData, colors: [...prevState.apiData.colors.filter(item => item !== value)]
            }
        }
        return {apiData: newApiData}
    }, () => this.props.handleApiCall(this.state.apiData))
}

I use a similar function for the other 'subgroups'. For years, all that changes in the function is colors to years. So I wish to create a more general function that can take a 'subgroup' as argument to target the right array in my object. I tried to pass a third variable (a string) subGroup like so:

handleCheckboxChange(value, isChecked, subGroup) {
     // ..
     newApiData = {...prevState.apiData, subGroup: [...prevState.apiData.subGroup, value]}

This does not work (I guess because it is now looking for the child 'subgroup' in my object). How can I make this work?

Taki · Accepted Answer · 2019-11-25 14:55:55Z

3

Use bracket notation :

handleCheckboxChange(value, isChecked, subGroup) {
  // ..
  newApiData = {...prevState.apiData, [subGroup]: [...prevState.apiData[subGroup], value]}

answered Nov 25, 2019 at 14:55

Taki

17.7k5 gold badges28 silver badges48 bronze badges

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

Comments

Mykybo · Accepted Answer · 2019-11-25 15:00:42Z

1

To make it a bit prettier, you can use this:

handleCheckboxColorChange(value, isChecked, subGroup) {
  this.setState((prevState) => {
      const newState = { ...prevState }
      newState[subGroup] = isChecked ? [ ...newState[subGroup], value ] : newState[subGroup].filter(item => item !== value)
      return newState
  }, () => this.props.handleApiCall(this.state.apiData))
}

answered Nov 25, 2019 at 15:00

Mykybo

1,5091 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

target array by passing argument in function in js/react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related