Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<!-- uncomment for React master
<script src="http://react.zpao.com/builds/master/latest/react.min.js"></script>
-->
<script src="//fb.me/react-with-addons-0.12.1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
</body>
</html>
 
/** @jsx React.DOM */
var RadioToggle = React.createClass({
  render: function () {
    var self = this;
    return (
      <div className="RadioToggle">
        {this.props.radioset.radios.map(function(radio, i){
          return (
            <label className="__option" key={i}>
              <h3 className="__header">{radio.label}</h3>
                  <input className="__input"
                         type="radio"
                         name={self.props.radioset.name}
                         value={radio.value}
                         checked={radio.checked}/>
              <span className="__label"></span>
            </label>
            )
          })
        }
      </div>
    );
  }
});
var App = React.createClass({
  render: function(){
    return <div><RadioToggle radioset={
  {
    name: "test1",
    radios: [
    {
      label: "false",
      value: 1,
      checked: false
    },
    {
      label: "true",
      value: 0,
      checked: true
    }
  ]}
}/>
<hr />
<RadioToggle radioset={
  {
    name: "test2",
    radios: [
    {
      label: "true",
      value: 1,
      checked: true
    },
    {
      label: "false",
      value: 0,
      checked: false
    }
  ]}
}/></div>
  }
});
React.render(<App />, document.body);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers