       </tbody>
     </Table>
 
+
+ProblemHintTable = React.createClass
+  render: ->
+    <Table responsive>
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Hint</th>
+        </tr>
+      </thead>
+      <tbody>
+      {@props.hints.map (hint, i) ->
+        <tr key={i}>
+          <td>{i+1}</td>
+          <td>{hint}</td>
+        </tr>}
+      </tbody>
+    </Table>
+
 Problem = React.createClass
 
   getInitialState: ->

    problems: React.PropTypes.array.isRequired

  render: ->
    console.log "rendering"
    if @props.problems.length == 0
      return <h4>No problems have been loaded. Click <a href='#'>here</a> to get started.</h4>

    problemComponents = @props.problems.map ((problem, i) ->
      <Col xs={12} lg={12}>
        <Problem key={i} onProblemChange={@props.onProblemChange} submissions={@props.submissions[problem.name]} {...problem}/>
      </Col>
    ).bind this

      problemFooter = @props.tags.map (tag, i) ->
        <Label key={i}>{tag}</Label>

    #Do something interesting here.
    panelStyle = if @props.disabled then "default" else "default"

    submissionDisplay = if @props.submissions and @props.submissions.valid + @props.submissions.invalid >= 1 then \
    <ProblemSubmissionDoughnut valid={@props.submissions.valid} invalid={@props.submissions.invalid} visible={@state.expanded}/>
