React component keys

by mukkaram waheed

HTML

<script src="http://fb.me/react-with-addons-0.10.0.js"></script>

CSS

body {
    font: 14px sans-serif;
}

.column {
    float: left;
    width: 31%;
    padding-right: 2%;
}

input {
    display: block;
    width: 100%;
}

JavaScript

var WithDefaultKeys = React.createClass({
    render: function() {
        return React.DOM.div({}, 
            this.props.collection.map(function(item, i) {
                return React.DOM.input({
                    defaultValue: item
                    // key: i // Default key
                });
            })
        );
    }
});

var WithUniqueRandomKeys = React.createClass({
    render: function() {
        return React.DOM.div({}, 
            this.props.collection.map(function(item) {
                return React.DOM.input({
                    defaultValue: item,
                    key: Math.random()
                });
            })
        );
    }
});

var WithUniqueConstantKeys = React.createClass({
    render: function() {
        return React.DOM.div({}, 
            this.props.collection.map(function(item) {
                return React.DOM.input({
                    defaultValue: item,
                    key: item
                });
            })
        );
    }
});

var Main = React.createClass({
    getInitialState: function() {
        return {collection: []};
    },
    componentDidMount: function() {
        this._add();
    },
    render: function() {
        return React.DOM.div({},
            React.DOM.button({onClick: this._add}, 'Add item'),
            React.DOM.button({onClick: this._changeLast}, 'Change last item DOM value'),
            React.DOM.p({}, this.state.lastAddedItem + ' added'),
            React.DOM.div({className: 'column'},
                React.DOM.strong({}, 'Default keys'),
                WithDefaultKeys({collection: this.state.collection})
            ),
            React.DOM.div({className: 'column'},
                React.DOM.strong({}, 'Unique random keys'),
                WithUniqueRandomKeys({collection: this.state.collection})
            ),
            React.DOM.div({className: 'column'},
                React.DOM.strong({}, 'Unique constant keys'),
               ...