 {TocStore} = require '../../../flux/toc'
 
 ExerciseCardMixin =
-  renderAnswers: (answer) ->
-    classes = ['answers-answer']
-    if answer.correctness is '1.0'
-      classes.push('correct')
-
-    <div className={classes.join(' ')}>
+  renderAnswer: (answer) ->
+    classes = classnames 'answers-answer',
+      correct: (answer.correctness is '1.0')
+
+    <div key={answer.id} className={classes}>
       <div className="answer-letter" />
       <ArbitraryHtmlAndMath className="answer" block={false} html={answer.content_html} />
     </div>
 
-  renderTags: (tag) ->
+  renderTag: (tag) ->
     {content, isLO} = ExerciseStore.getTagContent(tag)
-    classes = ['exercise-tag']
-
-    if isLO
-      classes = ['lo-tag']
-      loLabel = 'LO: '
-
-    <span className={classes.join(' ')}>{loLabel} {content}</span>
+    classes = if isLO
+      content = "LO: #{content}" if isLO
+      'lo-tag'
+    else
+      'exercise-tag'
+    <span key={tag.id or tag.name} className={classes}>{content}</span>
 
   renderExercise: ->
     content = @props.exercise.content
     question = content.questions[0]
     renderedAnswers = _(question.answers).chain()
       .sortBy('id')
-      .map(@renderAnswers)
+      .map(@renderAnswer)
       .value()
     tags = _.clone @props.exercise.tags
     # Display the exercise uid as a tag
     tags.push(name: "ID: #{@props.exercise.content.uid}")
-    renderedTags = _.map(_.sortBy(tags, 'name'), @renderTags)
+    renderedTags = _.map(_.sortBy(tags, 'name'), @renderTag)
     header = @renderHeader()
     panelStyle = @getPanelStyle()
 

      <ArbitraryHtmlAndMath className='-stimulus' block={true} html={content.stimulus_html} />
      <ArbitraryHtmlAndMath className='stem' block={true} html={question.stem_html} />
      <div className='answers-table'>{renderedAnswers}</div>

      <div className='exercise-tags'>{renderedTags}</div>
    </BS.Panel>


React = require 'react'
_ = require 'underscore'
classnames = require 'classnames'

BS = require 'react-bootstrap'
$ = require 'jquery'

