<file_sep>React project copying look feel of reddit post. State is used for up/downvoting posts and rearranging posts based on voteCount.
<file_sep>import React from 'react';
import PropTypes from 'prop-types';
import './Post.css';

function Post({ post, onUpVote, onDownVote }) {
  return (
    <div className="PostContainer">
      {/* count */}
      <Count post={post} onUpVote={onUpVote} onDownVote={onDownVote} />
      {/* avatar */}
      <div>
        <img
          className="Post-photo"
          src={
            post.photo ||
            'https://instagram.fisb1-1.fna.fbcdn.net/vp/dbd174e0ea12ed00ca1cdb5409b62bcd/5D0566F1/t51.2885-19/44884218_345707102882519_2446069589734326272_n.jpg?_nc_ht=instagram.fisb1-1.fna.fbcdn.net'
          }
        />
      </div>
      {/* text */}
      <div className="Post-text">
        <h1 className="Post-title red-text">{post.title}</h1>
        <h3>{post.site}</h3>
        <h3>
          Submitted {post.date_submitted} hours ago by {post.contributor}{' '}
        </h3>
        <Actions post={post} />
      </div>
    </div>
  );
}
Post.propTypes = {
  post: PropTypes.object.isRequired
};

function Count({ post, onUpVote, onDownVote }) {
  return (
    <div>
      <div>
        <span className="cursor" onClick={() => onUpVote(post)}>
          +
        </span>
      </div>
      <div>{post.voteCount}</div>
      <div>
        <span className="cursor" onClick={() => onDownVote(post)}>
          -
        </span>
      </div>
    </div>
  );
}

function Actions({ post }) {
  return (
    <ul>
      <li className="Post-li red-text">
        {post.comments > 0 ? post.comments + ' comments' : 'comment'}
      </li>
      <li className="Post-li">share</li>
      <li className="Post-li">save</li>
      <li className="Post-li">hide</li>
      <li className="Post-li">report</li>
    </ul>
  );
}

export default Post;
<file_sep>let posts = [
  {
    id: 0,
    title: 'Netlify: Our conversion from angular to react',
    site: 'netlify.com',
    date_submitted: 9,
    contributor: 'brianllamar',
    comments: 10,
    voteCount: 22
  },
  {
    id: 1,
    title: 'React in patterns - List of design patterns/techniques used while developing with React',
    site: 'github.com',
    date_submitted: 12,
    contributor: 'magenta_placenta',
    comments: 0,
    voteCount: 18
  },
  {
    id: 2,
    title: 'Redux vs MobX vs Flux vs... Do you even need that?',
    site: 'goshakkk.name',
    date_submitted: 8,
    contributor: 'goshakkkk',
    comments: 0,
    voteCount: 7
  }
]

export { posts };