React Base Fiddle (JSX)

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

by Hilarius Doren

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-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.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>

Preact

var Hello = React.createClass({

  getDefaultProps: function () {
  	return {
      fieldMap: {
        "1": [
          { value: "1.1", label: "1.1" },
          { value: "1.2", label: "1.2" }
        ],
        "2": [
          { value: "2.1", label: "2.1" },
          { value: "2.2", label: "2.2" }
        ],
        "1.1": [
          { value: "1.1.1", label: "1.1.1" },
          { value: "1.1.2", label: "1.1.2" }
        ],
        "2.1": [
          { value: "2.1.1", label: "2.1.1" },
          { value: "2.1.2", label: "2.1.2" }
        ]
      }
    }
  },
  
  getInitialState: function() {
     return {
         firstValue: '',
         secondValue: '',
         thirdValue: ''
     }
  },
  getOptions: function (key) {    
  	if (!this.props.fieldMap[key]) {
      return null;
    }
    
    return this.props.fieldMap[key].map(function (el, i) {
    	return <option key={i} value={el.value}>{el.label} </option>
    });
  },
  handleFirstLevelChange: function (event) {
    this.setState({
      firstValue: event.target.value,
      secondValue: '',
      thirdValue: ''
    });
  },
  handleSecondLevelChange: function (event) {
    this.setState({
    	secondValue: event.target.value,
      thirdValue: ''
    });
  },
  handleThirdLevelChange: function (event) {
  	var values = [];
    
    for (var i = 0; i < event.target.length; i++) {
    	if (event.target[i].selected) {
	      values.push(event.target[i].value);
      }
    }
    
    this.setState({
    	thirdValue: values
    });
  },
  getSecondLevelField: function () {
  	if (!this.state.firstValue) {
    	return null;
    }
    
    return (
    	<select onChange={this.handleSecondLevelChange} value={this.state.secondValue}>
       	<option value="">---</option>
      	{this.getOptions(this.state.firstValue)}
      </select>
    )
  },
  getThirdLevelField: function () {
  	if (!this.state.secondValue) {
	    return null;
    }
    
    return (
    	<select onChange={this.handleThirdLevelChange}...