Example.jsx

var UserAdder = React.createClass({
  getInitialState: function() {
    return {name: ''}
  },
  changeHandler: function(e) {
    this.setState({name: e.target.value});
  },
  appendUser: function() {
    this.props.callback(this.state.name);
  },
  render: function() {
    return(<div>
      <input type="text" onChange={this.changeHandler}></input>
      <button type="submit" onClick={this.appendUser}>Add</button>
    </div>)
  },
});















var HelloMessage = React.createClass({
  getInitialState: function() {
    return {users: []};
  },
  getUserList: function() {
    var list = [];

    for(var i = 0; i < this.state.users.length; i++) {
      list.push(<li>{this.state.users[i]}</li>);
    }
    return list;
  },
  addUser: function(userName) {
    var list = this.state.users;

    list.push(userName);

    this.setState({users: list});
  },
  render: function() {
    return (<ul>
      {this.getUserList()}
      <UserAdder callback={this.addUser} />
    </ul>)
  }
});