How to store values of checked checkboxes in an array in reactjs

Question

I'm using react-checkbox-group from "https://www.npmjs.com/package/react-checkbox-group". I want to add 4 checkboxes on my Web App, each of them having different values. I then want to store those values in an array. I have my code below for what i'm trying to do, and i'm not sure how to handle the 'onChange' event. Right now the array 'baseballItems' has all items initially, and i want the unchecked ones to disappear but i'm open to changing it so it's empty and the checked boxes are populating the array.

`this.state = { baseballItems: ['bat','baseball', 'shoes', 'cap']}

...

<CheckboxGroup
checkboxDepth={2}
name="baseballItems"
value={this.state.baseballItems}
onChange={(event) => this.setState({ baseballItems: [event.target.isChecked]})}>
<label><Checkbox value="bat"/> bat</label>
<label><Checkbox value="baseball"/> baseball</label>
<label><Checkbox value="shoes"/> shoes</label>
<label><Checkbox value="cap"/> cap</label>
</CheckboxGroup>`

m51 · Accepted Answer · 2019-07-02 19:38:14Z

0

this.state = { baseballItems: ['bat','baseball', 'shoes', 'cap']}

...

<CheckboxGroup
  checkboxDepth={2}
  name="baseballItems"
  value={this.state.baseballItems}
  onChange={(items) => { this.setState({ baseballItems: items }); }}
>
    <label><Checkbox value="bat"/> bat</label>
    <label><Checkbox value="baseball"/> baseball</label>
    <label><Checkbox value="shoes"/> shoes</label>
    <label><Checkbox value="cap"/> cap</label>
</CheckboxGroup>

There is similar example in react-checkbox-group readme

edited Jul 2, 2019 at 19:38

answered Jul 2, 2019 at 19:32

m51

2,02018 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

How to store values of checked checkboxes in an array in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related