React Base Fiddle (JSX)

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

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 data= {
    "items": [
        {
            "title": "item1"
        },
        {
            "title": "item2"
        },
        {
            "title": "item3"
        }
    ]
};

var deleter = function(id) {
    data.items.splice(id,1)
    React.render(<TodoApp />,
    document.getElementById('container'));
}

var Btn = React.createClass({

  handleClick: function(e) {
    console.log('clicked delete'+ this.props.id);
      //how does delete button modify this.state.items in TodoApp?
    deleter(this.props.id);
  
  },
  render: function() {
    return <button onClick={this.handleClick}>Delete</button>;
  }
});

var TodoList = React.createClass({

  render: function() {
    var createItem = function(itemText, index) {
      return <li key={index + itemText}>{itemText} &nbsp;<Btn id={index} /></li>;
    };
    return <div><ul>{this.props.items.map(createItem)}</ul></div>;
  }
});



var TodoApp = React.createClass({

  getInitialState: function() {
      console.log("getInitialState");

    return data;
  },



  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});

React.render(<TodoApp />, document.getElementById('container'));