presenter.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import ItemListCounter from '../../../lib/Helpers/ItemListCounter';
import Counter from '../../Counter';

require('./style.scss');

class ItemTypeSelector extends Component {
  constructor(props) {
    super(props);
    this._handeSelect = props.handleSelect.bind(this);
  }

  render() {
    let counter         = new ItemListCounter(this.props.items);

    let total           = counter.count();
    let hotelCount      = counter.countFor('Hotel');
    let restaurantCount = counter.countFor('Restaurant');
    let attractionCount = counter.countFor('Attraction');

    return (
      <div className="navigationWrapper" id="navigationWrapper">
        <Nav bsStyle="tabs" activeKey={ this.props.selected } onSelect={ this._handeSelect }>
          <NavItem className="allTab" eventKey='ALL' title="All">
            <Counter count={ total } />
            <span>All</span>
          </NavItem>
          <NavItem className="hotelTab" eventKey='Hotel' title="Stay">
            <Counter count={ hotelCount } />
            <small></small><span>Stay</span>
          </NavItem>
          <NavItem className="attractionTab" eventKey='Attraction' title="Play">
            <Counter count={ attractionCount } />
            <small></small><span>Play</span>
          </NavItem>
          <NavItem className="restaurantTab" eventKey='Restaurant' title="Eat">
            <Counter count={ restaurantCount } />
            <small></small><span>Eat</span>
          </NavItem>
        </Nav>
      </div>
    );

  }
}

export default ItemTypeSelector;