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
How to use arrow function in React stateless components? How to use function inside JSX expression? How to use React-Bootstrap component? How to create simple React Router to navigate multiple pages? How to handle events using expressions inside JSX? How to render raw HTML content in React JS? How to pass data from child component to its parent in ReactJS? Component displays Height and Width on window resize React JS get Tag Name and Inner Text on Click Display JSON Data in React JS