مشروع التخرج

جرب استعمال المتغير liked الذي لديك في التصيير الشرطي لزر الإعجاب أو يكفي ال handler الخاص بضغطة الزر: 

<button className={`btn-primary`} onClick={liked ? handleAddLove : handleRemoveLove}>
     <Image
         src="/heart-icon.svg"
         alt="heart icon"
         width={30}
         height={30}
       />
</button>

قد يمكنك ايضا استعمال نفس الشيء في تمييز تنسيقات زر الإعجاب عن زر الغاء الإعجاب.

انتبه الى اضافة handler آخر هو handleRemoveLove يقوم بنفس ما يدل عليه، أي ازالة الإعجاب.

هناك بعض الطرق لتطبيق نظام الإعجاب (الـ like system) للمشروع:

استخدم وضعين منفصلين في الـJSX:

<button onClick={likePhoto}>
  {liked ? <FaHeart /> : <FaRegHeart />}
</button>

حيث liked هو حالة الإعجاب، و FaHeart و FaRegHeart هما مكونان لتمثيل رمز قلب مليء أو فارغ.

احتفظ بعدد الإعجابات likes  في حالة الـ state ، ثم عند الضغط على الزر: 

likePhoto() {
  if (liked) {
    setLikes(likes - 1);
    setLiked(false);
  } else {
    setLikes(likes + 1);
    setLiked(true);  
  }
}

فهذا سيزيد أو ينقص عدد الإعجابات اعتمادًا على حالة الإعجاب الحالية.

هناك طرق أخرى لكن هذه هي الأبسط. يمكنك تجربة أي واحد وتعديل وتحسين الحل بمرور الوقت.