ReactJS: Get multiple checkboxes value with material-ui - function

Question

How to get multiple checkboxes value ? Ref not working in material ui checkbox, no idea why.
<Checkbox key={i} label={catagory.name} ref="categories" value={catagory_name} name="category" />
for example : example
Without material-ui you can get the value by ref, but with material-ui it require another method to get checkbox value.
I get the data from API, so it will add more from time to time. How to get the value? What function I should write? Anyone know ?

Answer 1

You can use build-in Material UI checkbox function - onChange. It will return the specified category and it's value.
app.js
class App extends Component {
result = new Set();
handleCheckbox(event, isChecked, value) {
console.log(isChecked, value);
this.res.add(value);
if (this.res.size === 3) console.log(this.res);
}
labelList = [{id: 1, category: 'a'}, {id: 2, category: 'b'}, {id: 3, category: 'c'}]; // your data
render() {
return (
<div className="App">
{this.labelList.map(element => (
<CheckboxField
key={element.id}
label={element.category}
category={element.category}
onChange={this.handleCheckbox}
/>
))}
</div>
)
}
}
Checkbox.js
export class CheckboxField extends React.PureComponent {
handleCheck = (event, isInputChecked) => {
this.props.onChange(event, isInputChecked, this.props.category);
};
render() {
return (
<Checkbox
label={this.props.category}
iconStyle={{fill: '#000'}}
value={this.props.category}
onCheck={this.handleCheck}
/>
)}
}