JSFiddle - React, Tailwind, and code Playground

by OndrejHj04

JavaScript

const Post = (props: PostProps) => {
  const {
    post: {
      content,
      author,
      postedDate,
      likes,
      comments,
      shares,
      isLiked,
      isBookmarked,
    },
  } = props;

  const [isPostBookmarked, setIsPostBookmarked] = useState(isLiked);
  const [isPostLiked, setIsPostLiked] = useState(isBookmarked);
  const [likesCount, setLikesCount] = useState(likes);

  const handlePostLikeClick = () => {
    setIsPostLiked((prevIsLikedState) => {
      setLikesCount((prevLikesCountState) => {
        return prevIsLikedState
          ? prevLikesCountState - 1
          : prevLikesCountState + 1;
      });

      return !prevIsLikedState;
    });

    return (
      <IconButton
        icon={Heart}
        label={likesCount}
        size={16}
        className="mr-1"
        filled={isPostLiked}
        onClick={handlePostLikeClick}
      />
    )
  };