Ad
How To Dynamically Get State Array Name React
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
Ad
Answer
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
})
}))
}
}
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad