members react component, can select members to add.

members.js

import React from 'react';
import ReactSelectize from 'react-selectize';
import Modal from 'react-modal';

export default class Members extends React.Component {
  constructor() {
    super();

    this.smallerCustomStyles = {
      content : {
        position                   : 'absolute',
        top                        : '40%',
        left                       : '50%',
        right                      : '30%',
        bottom                     : '40%',
        background                 : '#29C8E1',
        borderRadius               : '10px',
        outline                    : 'none'
      }
    };
    
    // load all options in modal
    this.options = ['Turkey', 'Ebert', 'Sam', 'Samantha', 'Katrina', 'Rosemary'].map(val => {
      return {label: val, value: val};
    });

    this.state = {
      adding: false,
      removing:false,
      memberidx: -1,
      members: []
    }f
  }

  /* 
  * finds selected member from the react-selectize html and then adds it to the member state
  */
  addMember() {
    var member = document.querySelector('.simple-value').firstChild.innerHTML;
    this.state.members.push(member);
    this.closeModal();
  }

  actuallyRemoveMember() {
    this.state.members.splice(this.state.memberidx, 1);
    this.state.memberidx = -1; //for safekeeping
    this.forceUpdate();
    this.closeModal();
  }

  removeMember(i, e) {
    this.setState({removing:true, memberidx: i});
  }

  openModal(){
    this.setState({adding:true});
  }

  closeModal(){
    this.setState({adding:false});
    this.setState({removing:false});
  }

  getMembers(){
    var members = this.state.members;
    this.setState({members: []});
    return members;
  }

  render() {
    var SimpleSelect = ReactSelectize.SimpleSelect;

    var members;

    this.state.members = this.props.members;

    if(this.props.members){
      members = this.props.members.map((m, i) => (<div key={m}>{m}<span className="remove-member" onClick={this.removeMember.bind(this, i)}>x</span></div>));
    }

    if(this.state.adding)
      var adding = (<Modal isOpen={this.state.adding} onRequestClose={this.closeModal.bind(this)} style={this.customStyles}>
        <div className="form-group">
        <SimpleSelect
            options = {this.options}
            placeholder = "Add Member" />
        <a className="form-button" onClick={this.addMember.bind(this)}>Add</a>
        <a className="form-button" onClick={this.closeModal.bind(this)}>Cancel</a>
        </div>
       </Modal>);


    var removing = (<Modal isOpen={this.state.removing} onRequestClose={this.closeModal} style={this.smallerCustomStyles}>
      Are you sure you want to remove {this.state.members[this.state.memberidx]}?
        <div className="form-group">
          <a className="form-button" onClick={this.closeModal.bind(this)}> No </a>
          <a className="form-button" onClick={this.actuallyRemoveMember.bind(this)}> Yes </a>
        </div>
      </Modal>);

    return (
      <div>
        <div className="add-box" onClick={this.openModal.bind(this)} >
          Add Member
          {adding}
        </div>
        <div id="members-box">
          {members}
          {removing}
        </div>
      </div>
    );
  }
}

members.styl

.add-box
  background-color darken(#9FBFE4, 20%)
  height 30px
  cursor pointer
  text-align center
  
#members-box
  flexbox(flex)
  flex-direction(column-reverse)
  flex-wrap nowrap
  align-items center
  border 1px darken(#9FBFE4, 20%)
  padding-bottom 10px
  overflow scroll
  max-height 200px 
  > div
    display inline-block
    padding-top 5px
    width 100%
    border 1px darken(#9FBFE4, 20%)
    background-color #9FBFE4


.remove-member
  font-size 14px
  cursor pointer
  float right