I create a web site of pictures, utilizing React. The information of every picture obtained from Firebase.

When the person clicks on a sure minimized picture – loaded a brand new part named ZoomCardItem, that accommodates particulars in regards to the picture (obtained from the dad or mum) and shows a bigger view of the picture. Then, the person can click on “Like” or “Dislike” and the variety of every one updates in Firebase.

Presently, Like & Dislike are baby elements of ZoomCardItem part. Mainly each of them do the identical factor, aside from writing to totally different paths in Firebase or studying totally different objects from the dad or mum.

I want to keep away from this duplicate code and create one generic part as an alternative, however I failed to take action by myself.
Might anybody assist me to enhance this?

export const ZoomCardItem = (props) => {
  const card = props.card;    
  return (
       <div className="zoom-container">
        <ZoomImage card={card} />
        <div id="detailsContainer" className="details-container">
          <p id="title" className="title">
            {card.title}
          </p>
          <hr />
          <p id="description">{card.description}</p>
          <p id="date" className="date">
            – {card.date}
          </p>
          <ul>{tagsList}</ul>
          <div className="likes-container">
            <Like card={card} />
            <Dislike card={card} />
          </div>
        </div>
      </div>
  );
};


perform Like(props) {
  let card = props.card;

  const [likeClassName, setLikeClassName] = useState(false);
  const [likeCounter, setLikeCounter] = useState(perform () {
    return parseInt(props.card.likes, 10);
  });

  useEffect(() => {
    setLikeCounter(parseInt(props.card.likes, 10));
  }, [props.card.likes]);

  useEffect(() => {
    setLikeCounter(parseInt(props.card.likes, 10));
  }, [props]);

  perform updateLikeDB() {
    var updates = {};
    updates["/Cards/" + card.id + "/likes"] = likeCounter + 1;
    firebase
      .database()
      .ref()
      .replace(updates, perform (error) {
        if (error) {
          return false;
        } else {
          // Information saved efficiently, replace the view of the likes counter
          setLikeClassName(!likeClassName);
          setLikeCounter(likeCounter + 1);
          return true;
        }
      });
  }

  return (
    <div className="like-container">
      <i
        className={
          likeClassName
            ? "fa fa-heart like-icon like-icon-anim"
            : "fa fa-heart like-icon "
        }
        onClick={updateLikeDB}
        onAnimationEnd={() => setLikeClassName(!likeClassName)}
      />
      <p id="likes">{likeCounter}</p>
    </div>
  );
}

perform Dislike(props) {
  let card = props.card;

  const [dislikeClassName, setDislikeClassName] = useState(false);
  const [dislikeCounter, setDislikeCounter] = useState(perform () {
    return parseInt(props.card.likes, 10);
  });

  useEffect(() => {
    setDislikeCounter(parseInt(props.card.dislikes, 10));
  }, [props.card.dislikes]);

  useEffect(() => {
    setDislikeCounter(parseInt(props.card.dislikes, 10));
  }, [props]);

  perform updateDislikeDB() {
    var updates = {};
    updates["/Cards/" + card.id + "/dislikes"] = dislikeCounter + 1;
    firebase
      .database()
      .ref()
      .replace(updates, perform (error) {
        if (error) {
          return false;
        } else {
          // Information saved efficiently, replace the view of the dislikes counter
          setDislikeClassName(!dislikeClassName);
          setDislikeCounter(dislikeCounter + 1);
          return true;
        }
      });
  }

  return (
    <div className="dislike-container">
      <i
        className={
          dislikeClassName
            ? "fas fa-heart-broken dislike-icon dislike-icon-anim"
            : "fas fa-heart-broken dislike-icon"
        }
        onClick={updateDislikeDB}
        onAnimationEnd={() => setDislikeClassName(!dislikeClassName)}
      />
      <p id="dislikes" className="dislikes">
        {dislikeCounter}
      </p>
    </div>
  );
}