     <Panel header={@props.name} defaultExpanded collapsible>
       <ListGroup fill>
         {@props.data.map ((data, i) ->
-          <ClassifierItem key={i} setClassifier={@props.setClassifier} {...data}/>
+          <ClassifierItem key={i+data} setClassifier={@props.setClassifier} {...data}/>
         ).bind this}
       </ListGroup>
     </Panel>

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

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

ProblemClassifier = React.createClass


ProblemClassifierList = React.createClass
  render: ->
    categories = _.groupBy @props.problems, "category"
    categoryData = _.map categories, (problems, category) ->
      name: "Only #{category} problems"
      size: problems.length
      classifier: (problem) ->
        problem.category == category

    organizations = _.groupBy @props.problems, "organization"
    organizationData = _.map organizations, (problems, organization) ->
      name: "Created by #{organization}"
      size: problems.length
      classifier: (problem) ->
        problem.organization == organization

    <PanelGroup className="problem-classifier" collapsible>
      <ProblemClassifier name="Categories" data={categoryData} {...@props}/>
      <ProblemClassifier name="Organizations" data={organizationData} {...@props}/>
      <ProblemClassifier name="Bundles" data={[]} {...@props}/>
    </PanelGroup>

ClassifierItem = React.createClass
