ReactFire fiddle
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://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://rawgit.com/puf/reactfire/puf-add-id-to-array-items/src/reactfire.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
/** @jsx React.DOM */
var TodoList3 = React.createClass({
handleClick: function(key) {
if (this.props.onClick) {
this.props.onClick(key);
}
},
render: function() {
var list = this;
var createItem = function(item, index) {
var boundClick = list.handleClick.bind(list, item['$id']);
return <li key={ item['$id'] } onClick={boundClick}>{ item.text }</li>;
};
return <ul>{ this.props.items.map(createItem) }</ul>;
}
});
var TodoApp3 = React.createClass({
mixins: [ReactFireMixin],
getInitialState: function() {
return {items: [], text: ""};
},
componentWillMount: function() {
var firebaseRef = new Firebase("https://ReactFireTodoApp.firebaseio.com/items/");
this.setState({ ref: firebaseRef });
this.bindAsArray(firebaseRef.limitToLast(25), "items");
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
if (this.state.text && this.state.text.trim().length !== 0) {
this.firebaseRefs["items"].push({
text: this.state.text
});
this.setState({text: ""});
}
},
handleClick: function(key) {
var firebaseRef = this.state.ref;
firebaseRef.child(key).remove();
},
render: function() {
return (
<div>
<TodoList3 items={ this.state.items } onClick={this.handleClick} />
<form onSubmit={ this.handleSubmit }>
<input onChange={ this.onChange } value={ this.state.text } />
<button>{ "Add #" + (this.state.items.length + 1) }</button>
</form>
</div>
);
}
});
React.render(<TodoApp3 />, document.getElementById("container"));