React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Goran Radosevic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

const RadioBox = React.createClass({
    getInitialState(){
        return {
            selected: ''
        };
    },
    render(){
        const items = this.props.items;
        var keys = items;
        if (typeof items === 'object') {
            keys = Object.keys(items).map(
                function (key) {
                    return key;
                });
        }
        return (
            <table className={'radiobox-group ' + this.props.class}>
                <tbody>
                {keys.map(this.displayItem)}
                </tbody>
            </table>
        );
    },
    displayItem(value, index){
        var name = this.props.items[value];
        var id = this.props.group + '_' + index;
        var group = this.props.group;
        return (
            <tr key={index}>
                <td>
                    <input
                        type="radio"
                        id={id}
                        group={group}
                        name={group}
                        value={value}
                        onChange={this.onItemChange}
                        checked={this.state.selected === value}
                        />
                </td>
                <td>
                    <label htmlFor={id}>{name}</label>
                </td>
            </tr>
        );
    },
    onItemChange(e){
        const selected = e.target.value;
        this.setState({selected});
        this.props.onChange(selected);
    },
    componentWillMount(){
        const selected = this.props.selected;
        this.setState({selected});
    }
});
function onChangeHandler(selected){
		alert('Selected: ' + selected);
}
ReactDOM.render(
  <RadioBox
    selected={'2'}
    class={'custom-class'}
    group={'ordinal-numbers'}
    onChange={onChangeHandler}
    items={{
        1: 'First', 
        2: 'Second',
        3: 'Third'
    }}
/>,
  document.getElementById('container')
);