Updating a collection of child components

app.js

var React = require('react');

/**
 * Input
 */
var Input = React.createClass({
  getInitialState: function () {
    return { name: this.props.name || '' }
  },

  update: function (e) {
    this.setState({
      name: e.target.value
    }, function () {
      // pass state change to parent onChange method
      if (this.props.onChange) {
        this.props.onChange(this.state.name, this.props.index, e);
      }
    }.bind(this));
  },

  render: function () {
    return (
      <div>
        <input type="text" onChange={this.update} value={this.state.name} />
      </div>
    );
  }
});

/**
 * InputList - list of Input components  
 */
var InputList = React.createClass({
  getInitialState: function () {
    return {
      names: this.props.names || [{}]
    }
  },

  submit: function (e) {
    e.preventDefault();

    console.log(this.state.names);
  },

  update: function (name, index) {
    this.setState(function (state) {
      state.names[index] = name;
    });
  },

  addInput: function (e) {
    e.preventDefault();
    this.setState({
      names: this.state.names.concat({})
    });
  },

  render: function () {
    var list = this.state.names.map(function (o, i) {
      return (
        <Input key={i} index={i} name={o.name} onChange={this.update} />
      );
    }.bind(this));

    return (
      <div>
      {list}
      <button onClick={this.addInput}>+ add</button>
      <button onClick={this.submit}>submit</button>
      </div>
    );
  }

});

React.render(<InputList />, document.getElementById('app'));