With a checkbox onChange event, how do I remove value from state array when unchecked in react?

State array:

this.state = { value: [] }

onChange function:

handleChange = event => {
    if (event.target.checked) {
        this.setState({
            value: [...this.state.value, event.target.value]
        });
    } else {
        this.setState({
            value: [this.state.value.filter(element => element !== event.target.value)]
        });
    }
};

Not sure exactly what the .filter() should be doing

With a checkbox onChange event, how do I remove value from state array when unchecked in react?

State array:

this.state = { value: [] }

onChange function:

handleChange = event => {
    if (event.target.checked) {
        this.setState({
            value: [...this.state.value, event.target.value]
        });
    } else {
        this.setState({
            value: [this.state.value.filter(element => element !== event.target.value)]
        });
    }
};

Not sure exactly what the .filter() should be doing

• javascript
• arrays
• reactjs
• onchange

1 Answer 1

You're very close, except:

1. You need to remove the [] around your call to filter. filter returns an array. If you wrap that in [], you're putting the array inside another array, which you don't want (in this case).

   and

2. Since you're updating state based on existing state, it's important to use the callback version of setState, not the version that directly accepts an object. State updates can be batched together, so you need to be sure you're dealing with the most recent version of the array.

So:

handleChange = ({target: {checked, value: checkValue}}) => {
//             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//                 ^− destructuring to take the properties from the event,
//                    since the event object will get reused and we're doing
//                    something asynchronous below
    if (checked) {
        this.setState(({value}) => ({value: [...value, checkValue]}));
    } else {
        this.setState(({value}) => ({value: value.filter(e => e !== checkValue)}));
        //                                  ^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^−−− No [] around  this
    }
};

There are some situations where you'd get away with using this.state.value instead of using the callback (for instance, if you only update value in response to certain events), but you have to be sure you know which ones they are; it's simpler just to use the callback.

FWIW, since it has multiple values in it, if it were me I'd call the state property values (plural) rather than value, which would also mean we didn't have to rename the value from the event target in the destructuring above:

handleChange = ({target: {checked, value}}) => {
    if (checked) {
        this.setState(({values}) => ({values: [...values, value]}));
    } else {
        this.setState(({values}) => ({values: values.filter(e => e !== value)}));
    }
};