Filtering in Reactjs / Creating filter buttons

Question

I am trying to creating some reusable components to filter arrays, but I think I am doing something wrong.

Should I be passing the handleclick all the way back up the chain of components like this?

I also cannot get the loading icon to appear in the filter button, it seems the button only re-renders after the click and filtering has been completed.

Is there a better place to store the active button, but this is the only way I could get the buttons to re-render.

var FilterButton = React.createClass({
  getInitialState: function() {
    return { loading: false };
  },

  handleClick: function() {
    this.setState({ loading: true }, function() {
      this.props.handleClick(this.props.filter);
    });
    this.setState({ loading: false });
  },

  render: function() {
    var cx = React.addons.classSet;
    var classes = cx({
      'btn': true,
      'btn-white': !this.props.active,
      'btn-primary': this.props.active
    });    

    var loader = <i className="fa fa-circle-o-notch fa-spin"></i>;

    return (
      <button className={classes} onClick={this.handleClick}>
       {this.state.loading ? loader : ''} {this.props.label}
      </button>
    );
  }

});

var FilterBar = React.createClass({
  getInitialState: function() {
    return { filter: 1 };
  },

  handleClick: function(filter) {
    this.setState({ filter: filter }, function() {
      this.props.handleClick(this.state.filter);
    });
  },

  render: function() {
    var filter = this.state.filter;
    return (
      <div className="nav">
        <FilterButton handleClick={this.handleClick} active={filter == 1} filter="1" label="Pending" />
        <FilterButton handleClick={this.handleClick} active={filter == 2} filter="2" label="Canceled" />
        <FilterButton handleClick={this.handleClick} active={filter == 3} filter="3" label="Shipped" />
      </div>
    );
  }
});

var OrdersView = React.createClass({
  getInitialState: function () {
    return {orders: [], status_id: 1};
  },

  componentDidMount: function() {
      /* get orders here via ajax and set state*/
   },

   handleFilter: function(status_id) {
    this.setState({ status_id: status_id });
   },

  render: function() {
    var self = this;
    var orders = $.grep(this.state.orders, function(order, i){
      return order.status_id == self.state.status_id;
    });

    return (
      <div>
        <FilterBar handleClick={this.handleFilter} />
        <OrderList orders={orders} />
      </div> 
    );
  }

});