CODEWITHSUNDEEP
functionreactjscheckboxmaterial-ui
Alan
Alan

Reputation: 69

ReactJS: Get multiple checkboxes value with material-ui

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 ?

Upvotes: 3

Views: 17955

Answers (1)

kind user
kind user

Reputation: 41893

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}
          />
    )}
}

Upvotes: 5

Related Questions