Getting value of checked radio button using Material UI Radio

Question

I'm creating a form and now attempting to do some input validation, and I'm struggling to grab the checked value from my radio component.

In one file I have:

<FormControl component="fieldset" name="method-of-payment">
    <RadioGroup onChange={this.handleChange} >
        <FormControlLabel value="credit" control={<Radio />} label="Credit Card"/>
        <FormControlLabel value="check" control={<Radio />} label="Check"/>
        <FormControlLabel value="purchase-order" control={<Radio />} label="Purchase Order"/>
     </RadioGroup>
</FormControl>

And I'm trying to grab the value doing this in another file (it's worked for everything else):

this.setState({
    method-of-payment: document.getElementsByName('method-of-payment')[0].value
})

But I'm having no luck getting the correct value.

I appreciate any help.

Edit: here's a link to the documentation I followed: https://material-ui.com/components/radio-buttons/

Will Jenkins · Accepted Answer · 2019-06-17 20:16:58Z

8

This looks like it's likely to be a bug-prone approach, and in general accessing elements directly is a React anti-pattern.

A better way would be to store the checked <Radio> element value as a property in your state. Use the onChange prop of your <RadioGroup> to hook in to when the selection changes, store it in your state and use this in the value prop of your containing <RadioGroup>.

You should add an event listener and then update your state based on the value you can get from the event. If you hook it up like that then you don't have to access the element to find its value - you already know it as it's in your state.

Basic example would go something like this:

class MyForm extends Component {
  state = { selected: "credit" };
  handleChange = ev => {
    this.setState({ selected: ev.target.value });
  };
  render() {
    const { selected } = this.state;
    return (
      <FormControl component="fieldset" name="method-of-payment">
        <RadioGroup onChange={this.handleChange} value={selected}>
          <FormControlLabel
            value="credit"
            control={<Radio />}
            label="Credit Card"
          />
          <FormControlLabel value="check" control={<Radio />} label="Check" />
          <FormControlLabel
            value="purchase-order"
            control={<Radio />}
            label="Purchase Order"
          />
        </RadioGroup>
      </FormControl>
    );
  }
}

Codepen here

edited Jun 17, 2019 at 20:16

answered Jun 17, 2019 at 20:00

Will Jenkins

9,9371 gold badge30 silver badges49 bronze badges

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

1 Comment

llamagish Over a year ago

Really appreciate the response! This looks almost identical to my code actually, I probably should've shown everything. The issue is finding a way to grab that current state value from another file, which performs the validation.

Marcos Furquim · Accepted Answer · 2020-10-16 20:27:26Z

0

it's simpler it looks

document.querySelector('[name="method-of-payment"]:checked')

answered Oct 16, 2020 at 20:27

Marcos Furquim

1,0519 silver badges12 bronze badges

Comments

Parham Abolghasemi · Accepted Answer · 2022-03-26 07:04:14Z

0

Define your on change like below

onChange={(e, val)=>console.log(val)

edited Mar 26, 2022 at 7:04

answered Mar 21, 2022 at 15:16

Parham Abolghasemi

1682 silver badges9 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Getting value of checked radio button using Material UI Radio

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related