component

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

by kazu69

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

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

JavaScript 1.7

var AnswerRadioInput = React.createClass({
  propTypes: {
    id: React.PropTypes.string,
    name: React.PropTypes.string.isRequired,
    label: React.PropTypes.string.isRequired,
    value: React.PropTypes.string.isRequired,
    checked: React.PropTypes.bool
    onChanged: React.PropTypes.func.isRequired
  },
  getDefaultProps: function() {
    return (
      id: !!this.props.checked,
      checked: this.props.id ? this.props.id : uniqueId('radio-')
    );
  },
  handleChanged: function(e) {
    var checked = e.target.cheked;
    this.setState({checked: checked});
    if(checked) { 
      this.props.onchanged(this.props.value);
    }
  },
  render: function() {
    return (
      <div className="radio">
        <label htmlFor={this.state.id}>
          <input type="radio" name={this.props.name} id={this.props.id} value={this.props.value} checked={this.props.checked} onChanged={this.handleChanged}>
          {this.props.label}
        </label>
      </div>
    );
  }
});

var AnswerMultipleChoiceQuestion = React.creClass({
  propTypes: {
    value: React.PropTypes.string,
    choice: React.PropTypes.array.isRequired,
    onComplete: React.PropTypes.func.isRequired
  },
  getInitState: function() {
    return {
      id: uniqueId('multiple-choice-'),
      value: this.props.value
    }
  },
  handleChanged: function() {
    this.setState({value: value});
    this.props.onCompleted(value);
  },
  renderChoices: function() {
    return this.props.choices.map(function(choice, i) {
      return AnswerRadioInput({
      key: 'choice-' + i,
      name: this.state.id,
      label: choice,
      value: choice,
      checked: this.state.value === choice,
      onchanged: this.handleChanged
      });
    }.bind(this));
  },
  render: function() {
    <div className="form-group'>
      <label className="survey-item-label" htmlfor=(this.state.id)>
        {this.props.label}
      </label>
      <div className="survey-item-content">
        {this.renderChoices()}
     ...