Golang React JS Technology Blog

Check which Radio button is Selected or Clicked

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script data-require="babel@*" data-semver="5.6.15" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script data-require="react@*" data-semver="0.13.3" src="https://fb.me/react-0.14.3.min.js"></script>
</head>

<body>
	<div id="root"></div>
</body>

<script type="text/babel">
    var GetResult = React.createClass({
      getInitialState: function () {
        return {
          gender: '',
        };
      },
      onSiteChanged: function (e) {
        this.setState({
          gender: e.currentTarget.value
          });
      },
      
      render: function(){
           var resultRows = this.props.data.map(function(result){
               return (
                   <tbody>
                        <tr>
                            <td><input type="radio" name="gender_name" 
                                       value={result.GENDER_NAME} 
                                       checked={this.state.gender === result.GENDER_NAME} 
                                       onChange={this.onSiteChanged} />{result.GENDER_NAME}</td>                            
                        </tr>
                   </tbody>
               );
           }, this);
           return (
               <table className="table">
                   <thead>
                       <tr>
                           <th>Select Gender</th>                           
                       </tr>
                   </thead>
                    {resultRows}
                   <tfoot>
                       <tr>
                           <td>Gender: {this.state.gender} </td>                         
                       </tr>
                   </tfoot>
               </table>
           );
      }
    });

var App = React.createClass({
  render: function(){
    return <div><GetResult data={[
      {GENDER_NAME: 'Male'},
      {GENDER_NAME: 'Female'}
    ]}/></div>
  }
});

React.render(<App />, document.getElementById('root'));
</script>

</html>
Most Helpful This Week
Component displays Height and Width on window resize Glyphicon Rating Star component Using this keyword access component properties and methods How to use arrow function in React stateless components? How to create simple React Router to navigate multiple pages? How to pass an Argument to a Method used inside JSX expression? Working with Forms, Inputs and onChange Events in ReactJs How to create Functional Component? Example of React JS with Material UI components How to render raw HTML content in React JS?