<div id="root"></div>

li > * {
  display: inline-block;
  width: 8em;
}

// Container Component
const UserListContainer = React.createClass({
  getInitialState: function() {
    return {
      users: [
        {id:1, name:'Ryan', active:true},
        {id:2, name:'Michael', active:true},
        {id:3, name:'Dan', active:true}
      ]
    }    
  },

  render: function() {
    return (<UserList users={this.state.users} toggleActive={this.toggleActive} />);
  },

  toggleActive: function(user) {
    // State should never be mutated (changed) directly, as this example shows.
    
    // create a shallow copy of the user, and toggle the active property
    var newUser = Object.assign({}, user, {
      active: !user.active
    });
    
    // create a shallow copy of the users list
    var newUsers = this.state.users.slice();
    
    // put the new user into the new list
    var index = this.state.users.indexOf(user);
    newUsers[index] = newUser;
    
    // set state with new users
    this.setState({
      users: newUsers
    });   
  }
});

// Presentational Component
const UserList = React.createClass({
  render: function() {
    let _this = this;
    
    return (
      <ul className="user-list">
        {this.props.users.map(function(user) {
          
          // The `.bind()` method ensures that when `toggleActive()` is called,
          // the first argument to it will be the `user`
          
          return (
            <li key={user.id}>
              <a href="#">{user.name}</a>
              <span>{user.active ? 'Active' : 'Not Active'}</span>
              <button onClick={_this.props.toggleActive.bind(null, user)}>Toggle Active</button>
            </li>
            );
        })}
      </ul>
      );
  }
});

ReactDOM.render(<UserListContainer />, document.getElementById('root'))