How do I get the value of Radio button(react-radio-buttons) in Reactjs?

Question

How do I get the value of radio buttons , if I call updateRadioButton in RadioGroup, it results in error. I need to print as Male or Female in console using (react-radio-buttons). Radio Buttons are printing correctly but I'm unable to get the value. Thank you in Advance.

 class CreateUserComponent extends React.Component {
        constructor(props) {
        super(props); 
        this.state={radio:''}
    }

    updateRadioButton(e) {
        this.setState({ radio: e.target.value });
    }

    <RadioGroup horizontal>
            <RadioButton value="Male">Male</RadioButton>
            <RadioButton value="Female">Female</RadioButton>
        </RadioGroup>

Sagiv b.g · Accepted Answer · 2017-10-13 11:49:10Z

4

Well according to the DOCS of this lib, RadioGroup has a onChange prop handler that you can pass that will return the selected value, and then you could set it in the state or pass it on.

Here is small running example with your code:

debugger
const RadioGroup = ReactRadioButtonsGroup.ReactRadioButtonsGroup;
const RadioButton = ReactRadioButtonsGroup.ReactRadioButton;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onRadiochange = value => {
    console.log(value);
  };

  render() {
    return (
      <div>
        <RadioGroup horizontal onChange={this.onRadiochange}>
          <RadioButton value="Male">Male</RadioButton>
          <RadioButton value="Female">Female</RadioButton>
        </RadioGroup>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/bundle.min.js"></script>
<div id="root"></div>

edited Oct 13, 2017 at 11:49

answered Oct 13, 2017 at 11:41

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

2 Comments

Sagiv b.g Over a year ago

@PremKumar no problem, iv'e added a running snippet with your code

PremKumar Over a year ago

Wow , Thank you so much :-)

An Nguyen · Accepted Answer · 2017-10-13 11:42:13Z

3

From this react-radio-buttons example:

class CreateUserComponent extends React.Component {
  ... 
  updateRadioButton(value) {
    this.setState({ radio: value });
  }

  render() {
    ...

    return (
      <RadioGroup horizontal onChange={this.updateRadioButton} >
        <RadioButton value="Male">Male</RadioButton>
        <RadioButton value="Female">Female</RadioButton>
      </RadioGroup>
    )
    ...
  }
}

answered Oct 13, 2017 at 11:42

An Nguyen

1,47810 silver badges21 bronze badges

Comments

user-developer · Accepted Answer · 2017-10-13 11:58:37Z

2

Add onChange event to RadioGroup.

class CreateUserComponent extends React.Component {
    constructor(props) {
    super(props); 
    this.state={radio:''};
    this.updateRadioButton = this.updateRadioButton.bind(this);
}

updateRadioButton(value) {
    this.setState({ radio: value });
}

render() {
 return(
   <RadioGroup horizontal onChange={this.updateRadioButton}>
        <RadioButton value="Male">Male</RadioButton>
        <RadioButton value="Female">Female</RadioButton>
   </RadioGroup>
 );
}

edited Oct 13, 2017 at 11:58

answered Oct 13, 2017 at 11:44

user-developer

5864 silver badges7 bronze badges

2 Comments

PremKumar Over a year ago

Thank you. But, e.target.value doesn't work . updateRadioButton(value) { this.setState({ radio: value }) }

user-developer Over a year ago

You are correct. I didn't notice that. I just updated.

Collectives™ on Stack Overflow

How do I get the value of Radio button(react-radio-buttons) in Reactjs?

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related