content: import React from 'react';
  import { Link } from 'react-router';
  import CSSTransitionGroup from 'react-addons-css-transition-group';
  
  const Photo = React.createClass({
      
      render() {
          const {post, i, comments} = this.props;
          return (
              <figure className= "grid-figure">
                  
                  <div className = "grid-photo-wrap">
                      <Link to={`/view/${post.code}`}>
                      <img src={post.display_src} alt={post.caption} className="grid-photo"></img>
                      </Link>     
  
                      <CSSTransitionGroup transitionName="like"
                       transitionEnterTimeout={500}
                      transitionLeaveTimeout={500}>
                      <span key={post.likes} className="likes-heart">{post.likes}</span>
                      </CSSTransitionGroup>
                  </div>
  
                  <figcaption>
                      <p> {post.caption} </p>
                      <div className="control-buttons">
                        <button onClick={this.props.increment.bind( null, i)} className="likes">&hearts; {post.likes}
                        </button>
                        {/*<Link className="button" to={`/view/${post.code}`}>
                          <span className="comment-count">
                              <span className="speech-bubble"></span>
                              {comments[post.code] ? comments[post.code].length : 0}
                          </span>
                        </Link>*/}
                      </div>
                  </figcaption>
  
              </figure>
          )
  
      }
  });
  
  export default Photo;