Блог

 export default function Post({post}) {

   const [like,setLike] = useState(post.like)
   const [islike,setIslike] = useState(false)

   const handler=()=>{
       setLike(islike? like-1:like 1 )
       setIslike(!islike)
       
   }
    return (
        <>
        <div className="postcontainer">
           <div className='postwrapper'>
               
          
            <div className="postTop">
                <div className="topleft">
                    <img className="images" src= {Users.filter((u)=> u.id === post.userId)[0].imagesProfile} alt="profile" />
                    <span className="names"> {Users.filter((u)=> u.id === post.userId)[0].userName} </span>
                    <span className="dates"> {post.date}</span>
                    
                </div>
                <div className="topzRight">
                <MoreVert />
                </div>
                
            </div>
            <div className="postcenter">
                
               <span className='text'>{post.descrip}</span>
               <img className="imagepost" src={post.imagesPost} alt="newpost" />

            </div>
            <div className="postbotton">
                <div className="postbottonLeft">
                <LocationOnIcon     className="icon" />
                <FavoriteIcon   className="icon" onClick={handler}/>
               
                <span className='counter' > {like} People liked it</span>
                </div>
                <div className="postbottonRight">
                <span>{post.comment} comments</span>
                <SmsOutlined className="iconcomment" />
                </div>
                
            </div>
            </div> 
        </div>
        </>
    )
 

Во-первых, вам следует попытаться подробнее рассказать о том, что вы хотите сделать в коде, вместо того, чтобы просто указывать вопрос в заголовке и указывать код в качестве основного текста.

Во-вторых, если вы хотите, чтобы какой-либо HTML-элемент имел другой цвет в зависимости от того, нажали вы на него или нет, вы можете создать класс CSS для каждого состояния, которое вы хотите, чтобы один класс мог быть, .isLiked а другой .isNotLiked -каждый из них имел другой цвет. Затем в вашем коде вы можете указать условие для className атрибута HTML-элемента, чтобы решить, каким он должен быть на основе условия.

Напр.: className={isLiked ? 'isLiked' : 'isNotLiked'}