       sortedProblems.reverse()
 
   render: ->
+    filteredProblems = @filterProblems @props.problems
     <Row className="pad">
       <Col xs={3} md={3}>
         <Row>
           <ProblemFilter onSortChange={@onSortChange} filter="" onFilterChange={@onFilterChange}/>
         </Row>
         <Row>
-          <ProblemClassifierList setClassifier={@setClassifier}/>
+          <ProblemClassifierList setClassifier={@setClassifier} problems={filteredProblems}/>
         </Row>
       </Col>
       <Col xs={9} md={9}>
-        <ProblemList problems={@filterProblems(@props.problems)}/>
+        <ProblemList problems={filteredProblems}/>
       </Col>
     </Row>

    @setState update @state,
      activeSort: $set: {name: name, ascending: ascending}

  setClassifier: (state, classifier) ->
    @setState update @state,
      problemClassifier: $set: classifier


  handleClick: (e) ->
    activeState = !@state.active
    @setState {active: activeState}
    console.log @props, activeState
    @props.setClassifier activeState, @props.classifier

  render: ->
    glyph = <Glyphicon glyph="ok"/>

    <ListGroupItem onClick={@handleClick}>
        {@props.name} {if @state.active then glyph} <div className="pull-right"><Badge>{@props.size}</Badge></div>
    </ListGroupItem>

ProblemClassifier = React.createClass
