how checking if a card has been clicked?

user_18128679 0
Viewed 34

I have a div(card) as below. When I click on this card, a detail page opens and when I come back to this page, I want the jackson text to be grayed out. Makes handleClick detail page open.

enter image description here like this

enter image description here

export default function ListComponent({ handleClick }) {
  const [data, setData] = useState([]);
  const [isSelected, setIsSelected] = useState(false);
 
  useEffect(() => {
    getMailbox()
      .then((response) => {
        if (response?.success) {
          setData(response?.data?.mails);
        }
      })
      .catch((err) => {
        console.log("err", err);
      });
  }, []);

  return (
    
      <div className={styles.messageBoxContainer}>
        {data.map((item, index) => (
            <div
              key={`item-container-${index}`}
              className={styles.mailItemContainer}
              onClick={() => {
                handleClick(item);
              }}>
                <div className={styles.mailOwner}>
                  <p className={isSelected ? styles.userEmailTextSelected : styles.userEmailText}>{item?.senderName}</p>
                </div>
             </div>
           ))}
        </div>
  );
}
reactjs
1 Answers

You can add a return field to your useEffect hook so that when the element is unmounted its color change.

useEffect(() => {
    getMailbox()
    //...

    return () => {
        document.querySelector('#yourElementID').style.color = 'gray'
    }
 }, []);
user_148473370
Related