<!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>
