React Dynamic List Adder

dynamiclist.js

var id = 0;

var NameRow = React.createClass({
    render: function () {
        return (<div>
            <ul>
                {this.props.names.map(function (e) {
                    return (<li key={e.id}>{e.name}</li>);
                })}
            </ul>
        </div>);
    }
});

var NameInput = React.createClass({
    onAddName: function () {
        this.props.onAddName(this.refs.nameInput.value);
    },
    render: function () {
        return (<div>
            <input ref="nameInput" type="text"/>
            <button onClick={this.onAddName}>Ekle</button>
        </div>);
    }
});

var NameContainer = React.createClass({
    getInitialState: function () {
        return {
            names: this.props.names || []
        };
    },
    onAddName: function (name) {
        var clonedNames = this.state.names.slice(0);
        clonedNames.push({
            id: id++,
            name
        });
        this.setState({
            names: clonedNames
        });
    },
    render: function () {
        return (<div>
            <NameInput onAddName={this.onAddName}/>
            <NameRow names={this.state.names}/>
        </div>);
    }
});

var NAMES = [
    {
        id: id++,
        name: "Rahman"
    },
    {
        id: id++,
        name: "Hakan"
    },
    {
        id: id++,
        name: "Ayşe"
    },
];


ReactDOM.render(<NameContainer names={NAMES}/>, document.querySelector("#root"));