React Base Fiddle (JSX)

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

by Martin Stabenfeldt

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"></div>
<div id="dynamic-form"></div>

<!-- 
    The big question here is
     - How can I update state.items[1].populate_at with a new value when the user clicks 'web_end' ?
     - How can this be build dynamically so that changes on the form attributes for items[1] only updates
       items[1] and items[2] only updates items[2], and so on?

-->

CSS

.status {
    color: red;
}

JavaScript 1.7

'use strict';

  var data = {
    populate_at: ['automatically', 'web_start', 'web_end'],
    autocomplete_from: ['customer_name', 'customer_address',
      'project_address', 'worker_names', 'project_name', 'user_name']
  };

  var FIELD_NAMES = {
    name              : null,
    populate_at       : null,
    same_as           : null,
    autocomplete_from : "not set",
    title             : null,
  };


  var PopulateAtCheckboxes = React.createClass({
    handleChange: function (e) {
      item = this.state.items[1];
      item.name = 'newName';
      items[1] = item;

      this.setState({items: items});
   
  },

  render: function() {
    var populateAtCheckbox = this.props.populate_at.map(function(value) {
      return (
        <label for={value}>
          <input type="radio" name={'populate_at'+this.props.id} value={value}
            onChange={this.handleChange} checked={this.props.checked == value}
            ref="populate-at"/>
          {value}
        </label>
      );
    }, this);
    return (
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});

var AutocompleteFromCheckboxes = React.createClass({
  handleChange: function(e) {
    this.setState( { autocomplete_from: event.target.value },
                  function () { console.log('autocompleteFrom state: ',
                                            this.state.autocomplete_from); }
                 );
  },
  render: function() {
    var autocompleteFrom = this.props.autocomplete_from.map(function(value) {
      return (
        <label for={value}>
          <input type="checkbox" name={value} value={value}
            onChange={this.handleChange}
            checked={this.props.checked == value}
            ref="autocomplete-from"/>
          {value}
        </label>
      );
    }, this);
    return (
      <div className="autocomplete-from">
        {autocompleteFrom}
      </div>
    );
  }
});

var FieldName = React.createClass({
 ...