Flux - 16 - Routing with Parameters

Author: StephenGrider

imgur-client/src/components/topic-list.jsx

@@ -2,6 +2,8 @@ var React = require('react');
 var Reflux = require('reflux');
 var TopicStore = require('../stores/topic-store');
 var Actions = require('../actions');
+var ReactRouter = require('react-router');
+var Link = ReactRouter.Link;
 
 module.exports = React.createClass({
   mixins: [
@@ -23,9 +25,10 @@ module.exports = React.createClass({
   },
   renderTopics: function() {
     return this.state.topics.map(function(topic){
-      return <li>
-        {topic}
-      </li>
+      return <Link to={"topics/" + topic.id} className="list-group-item" key={topic.id}>
+        <h4>{topic.name}</h4>
+        <p>{topic.description}</p>
+      </Link>
     });
   },
   onChange: function(event, topics) {