Flux - 22 - Scaffolding Image Previews

Author: StephenGrider

imgur-client/src/components/image-preview.jsx

@@ -0,0 +1,14 @@
+var React = require('react');
+
+module.exports = React.createClass({
+  render: function() {
+    return <div>
+      {this.image()}
+    </div>
+  },
+  image: function() {
+    var link = 'http://i.imgur.com/' + this.props.id + 'h.jpg';
+
+    return <img src={link} />
+  }
+});

imgur-client/src/components/topic.jsx

@@ -2,6 +2,7 @@ var React = require('react');
 var Actions = require('../actions');
 var ImageStore = require('../stores/image-store');
 var Reflux = require('reflux');
+var ImagePreview = require('./image-preview');
 
 module.exports = React.createClass({
   mixins: [
@@ -20,9 +21,14 @@ module.exports = React.createClass({
   },
   render: function() {
     return <div>
-
+      {this.renderImages()}
     </div>
   },
+  renderImages: function() {
+    return this.state.images.slice(0, 20).map(function(image) {
+      return <ImagePreview key={image.id} {...image} />
+    });
+  },
   onChange: function(event, images) {
     this.setState({images: images})
   }