Toggling state with dynamic key value pair - reactjs

Question

I have been trying to toggle state using dynamic key value pairs but it doesn't seem to happen.
Here is the state:
constructor(props) {
super(props);
this.state = {
firecrackerAnimation: false,
mainImageBounceAnimation: false,
flowersFallingAnimation: false,
};
}
This is the code I am using to toggle state
changeAnimation = e => {
this.setState(
{
[e.target.value]: !(this.state[event.target.value]),
},
() => {
console.log(this.state);
}
);
Below is where I am using it inside my render()
<div className="form-row">
<span className="form-label">Animations</span>
<input
className=""
type="checkbox"
value="firecrackerAnimation"
onClick={this.changeAnimation}
checked={this.state.firecrackerAnimation}
/>{" "}
Fire Cracker Animation <br />
<input
className=""
type="checkbox"
value="mainImageBounceAnimation"
onChange={this.changeAnimation}
checked={this.state.mainImageBounceAnimation}
/>{" "}
Main Image Bounce <br />
<input
className=""
type="checkbox"
value="flowersFallingAnimation"
onChange={this.changeAnimation}
checked={this.state.flowersFallingAnimation}
/>{" "}
Flowers Falling Animation <br />
</div>

Answer 1

There are several mistakes I've pointed out:
You should use e.target.name in order to get the name of the checkbox being clicked.
You have to provide name for checkboxes, not the value
WORKING DEMO
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
firecrackerAnimation: false,
mainImageBounceAnimation: false,
flowersFallingAnimation: false,
};
}
changeAnimation = (e) => {
this.setState(
{
[e.target.name]: !(this.state[e.target.name]),
},
() => {
console.log(this.state);
})
}
render() {
return (
<div className="form-row">
<span className="form-label">Animations</span>
<input
className=""
type="checkbox"
name="firecrackerAnimation"
onChange={this.changeAnimation}
checked={this.state.firecrackerAnimation}
/>{" "}
Fire Cracker Animation <br />
<input
className=""
type="checkbox"
name="mainImageBounceAnimation"
onChange={this.changeAnimation}
checked={this.state.mainImageBounceAnimation}
/>{" "}
Main Image Bounce <br />
<input
className=""
type="checkbox"
name="flowersFallingAnimation"
onChange={this.changeAnimation}
checked={this.state.flowersFallingAnimation}
/>{" "}
Flowers Falling Animation <br />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
.as-console-wrapper { max-height: 50% !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

Change your changeAnimation function as follows:
changeAnimation(e){
var value = e.target.value;
this.setState({[value]: !(this.state[value])});
}
Here is the fiddle.

Answer 3

you have problem with your change animation event
changeAnimation = e => {
this.setState(
{
// [e.target.value]: !(this.state[event.target.value]),
//here you have to change like
this.state[e.target.value]: !(this.state[event.target.value]),
},
() => {
console.log(this.state);
}
);

Answer 4

The other responses are correct in that you can setState with dynamic keys and variables, however React recommends against using state inside setState.
From the docs:
"React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state."
- https://reactjs.org/docs/state-and-lifecycle.html
You can take the same idea as the other comments mention and make setState accept a function instead. I used this in my code (button was defined in an outer function).
this.setState((prevState) => ({
[button]: !prevState[button]
}));