Store only .checked checkbox values in state? - reactjs

Question

I've got a few check boxes that, onClick, are pushed to state via .concat().
class App extends React.Component {
constructor() {
super()
this.state = {
selectedChoices: []
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(event) {
this.setState({
selectedChoices: [this.state.selectedChoices.concat(event.target.value)]
})
}
render() {
return(
<div>
<div onChange={this.handleClick}>
<input type="checkbox" name="choiceNumber" value="one" />
<input type="checkbox" name="choiceNumber" value="two" />
<input type="checkbox" name="choiceNumber" value="three" />
</div>
<p>{this.state.selectedChoices}</p>
</div>
)
}
}
Naturally, anytime the check box is clicked, regardless if it's .checked or not, that value is pushed to state.
I'm having some trouble finding the best way to go about this.

Answer 1

Above answer is correct but no need to use extra boolean "Flag".
use:
event.target.checked
Below snippet will work!
handleClick(event) {
if (!event.target.checked) {
this.setState({
selectedChoices: this.state.selectedChoices.filter(
(number) => number !== event.target.value
)
});
} else {
this.setState({
selectedChoices: this.state.selectedChoices.concat(event.target.value)
});
}
}

Answer 2

First, you don't have to wrap this.state.selectedChoices.concat(event.target.value) inside an array.
Second, you have to make condition if selected value has been added to selectedChoices you have to remove value from selectedChoices using filter. Else, you push value using concat just like you do.
import React from "react";
export default class App extends React.Component {
constructor() {
super();
this.state = {
selectedChoices: []
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
let flag = false;
for(const i in this.state.selectedChoices) {
if (this.state.selectedChoices[i] === event.target.value) {
flag = true;
break;
}
}
if(flag) {
this.setState({
selectedChoices: this.state.selectedChoices.filter(number => number !== event.target.value)
});
} else {
this.setState({
selectedChoices: this.state.selectedChoices.concat(event.target.value)
});
}
}
render() {
return (
<div>
<div onChange={this.handleClick}>
<input type="checkbox" name="choiceNumber" value="one" />
<input type="checkbox" name="choiceNumber" value="two" />
<input type="checkbox" name="choiceNumber" value="three" />
</div>
<p>{this.state.selectedChoices}</p>
</div>
);
}
}
here you can see how it run https://codesandbox.io/s/affectionate-diffie-0oi4t?file=/src/App.js