react template

by johnthethird

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/**
* @jsx React.DOM
*/

var CarForm = React.createClass({
  render: function() {
    return (
      <div>
        <button onClick={this.handleRemoveClick}>-</button>
        <input defaultValue={this.props.formId}/>
        <input type="checkbox" defaultChecked={this.props.formId === 2}/>
        {'I am ' + this.props.formId}
      </div>
    );
  },
  handleRemoveClick: function(e) {
    e.preventDefault();
    this.props.onRemove(this.props.formId);
  },
});

var CarForms = React.createClass({
  getInitialState: function() {
    return {formIds: [1, 2]};
  },
  render: function() {
    return (
      <div>
        {
          this.state.formIds.map(function(formId) {
            console.log(formId);
            return <CarForm formId={formId} onRemove={this.handleRemove}/>;
          }.bind(this))
        }
      </div>
    );
  },
  handleRemove: function(id) {
    this.state.formIds.forEach(function(formId, i) {
      if (id == formId) {
        this.state.formIds.splice(i, 1);
      }
    }.bind(this));

    this.forceUpdate();
  },
});

React.renderComponent(<CarForms />, document.body);