React Reconciliation Ex

by Diya_Khan

HTML

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

JavaScript 1.7

/** @jsx React.DOM */

var TextBoxList = React.createClass({
    getInitialState: function() {
        return {count: 1};
    },
    add: React.autoBind(function() {
        this.setState({count: this.state.count + 1});
    }),
    render: function() {
        var items = [];
        for (var i = 0; i < this.state.count; i++) {
            items.push(<li><input type="text" placeholder="change me!" /></li>);
        }
        return (
            <ul>
                {items}
                <input type="button" value="Add an item" onClick={this.add} />
            </ul>
        );
    }
});
 
React.renderComponent(
    <div>
        <p>Every time you add a new text box to the list, we "re-render" the whole list, but any text entered in the text boxes is left untouched because React is smart enough to just append the new text box instead of blowing away the old DOM nodes.</p>
        <TextBoxList />
   </div>, document.body);