How to dynamically get state array name React

Question

How can I dynamically set the name of the array in state, to get it from state.

onCheckBoxItemClickList(e, value, path) {
    console.log(e.target.checked)
    if (e.target.checked) {
        //append to array
        this.setState({
            [path]: this.state.[path].concat([value])
        })
    } else {
        //remove from array
        this.setState({
            [path]: this.state.[path].filter(function (val) {
                return val !== value
            })
        })
    }
}

I know how to dynamically set and get a key in state, but when I try and do

[path]: this.state.[path].concat([value])

I get the below error:

Any help would be greatly appreciated, Thanks

quirimmo · Accepted Answer · 2019-01-10 13:08:15Z

7

You have an extra dot in your code (after state):

[path]: this.state.[path].concat([value])

Should be:

[path]: this.state[path].concat([value])

Then whenever you want to set the state based on the previous state, you should use the setState which takes a callback in, with the prevState as argument.

So your code should look something like:

onCheckBoxItemClickList(e, value, path) {
    console.log(e.target.checked)
    if (e.target.checked) {
        //append to array
        this.setState(prevState => ({
            [path]: prevState[path].concat([value])
        }))
    } else {
        //remove from array
        this.setState(prevState => ({
            [path]: prevState[path].filter(function (val) {
                return val !== value
            })
        }))
    }
}

answered Jan 10, 2019 at 13:08

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

1 Comment

Andrew Irwin Over a year ago

Cheers thanks very much. It's a bit confusing that if you want to specify the array name/state key (not dynamically) it requires the dot beforehand, but doing it dynamically doesnt require the dot. This answer stackoverflow.com/a/43985409/2208342 on stack overflow made state a lot clearer to me and showed me that state is an object.

Collectives™ on Stack Overflow

How to dynamically get state array name React

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related