React Goods table

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container"></div>

CSS

.active {
  background-color: rgba(90, 10, 0, .4);
}

.hidden {
  visibility: hidden;
}

.filter-result-item {
  background-color: rgba(50, 80, 20, 0.4);
  margin: 20px;
  padding: 20px;
}

JavaScript 1.7

const FilterPopup = React.createClass({
  filterPopup(){},
  selectAll(){},
  render() {

    return (
        <div className="filter-popup" onClick={this.props.onClick}>
          <div className="filter-popup-header">
            <div className="filter-popup-select-all checkbox"  onClick={this.selectAll}>
              <input type="checkbox" id="test" name="test1"/>
              <label htmlFor="test1"><span></span><i>Select All</i></label>
            </div>
          </div>

          <div className="filter-popup-body">
            <div className="filter-popup-select checkbox">
              <input type="checkbox" id="test1" name="test1"/>
              <label htmlFor="test1"><span></span><i>Speaker</i></label>
            </div>
            <div className="filter-popup-select checkbox">
              <input type="checkbox" id="test1" name="test1"/>
              <label htmlFor="test1"><span></span><i>Organizer</i></label>
            </div>
            <div className="filter-popup-select checkbox">
              <input type="checkbox" id="test1" name="test1"/>
              <label htmlFor="test1"><span></span><i>Sponsor</i></label>
            </div>
            <div className="filter-popup-select checkbox">
              <input type="checkbox" id="test1" name="test1"/>
              <label htmlFor="test1"><span></span><i>Atendee</i></label>
            </div>
          </div>

          <div className="filter-popup-footer">
            <div className="filter-popup-reject" onClick={this.props.onClick}><i className="fa fa-times"></i></div>
            <div className="filter-popup-confirm"  onClick={this.props.onClick}><i className="fa fa-check"></i></div>
          </div>
        </div>
    );
  }

});


const FilterItem = React.createClass({

  
  handleClickOutside: function(evt) {
    this.setState({modalIsOpen: false});
  },

  getInitialState() {
    return {
      modalIsOpen: false
    };
  },

  closeModal(e) {
  //console.log('close');
   ...