React useState() & useEffect: DOM element changed but not rendering

Question

I'm trying to achieve in react: click the heart to like/unlike a move, using useState() & useEffect(), but seems the element is applied with new class name, but the color didn't change when i clicked.

export function MovieCard2(props) {
 const [heartClassName, setHeartClassName] = useState("heart heart-white")


 useEffect(() => {
  console.log(ref.current)
  if(isLiked === false) {
    setHeartClassName("heart heart-white")
  } else {
    setHeartClassName("heart heart-red")
  }
}, [isLiked]);

return (
<>
  <div
    className={heartClassName}
    onClick={function (ev) {
      ev.stopPropagation();
      setLiked(!isLiked)
  >
    ❤
  </div>


  <style jsx>{`

    .heart {
      padding: 16px 0 auto auto;
    }
    .heart-white {
      color: white;
    }
    .heart-red {
      color: red;
    }
  `}</style>
</>

); }

score 1 · Answer 1 · answered Jul 14 '22 at 12:21

try this one:

 const [heartClassName, setHeartClassName] = useState("heart heart-white");
 const [isLiked,setLiked]=useState(false);
 useEffect(() => {

    if (isLiked === false) {
      setHeartClassName("heart heart-white");
    } else {
    setHeartClassName("heart heart-red");
   }
 }, [isLiked]);

you HTML

<style jsx>{`
    .heart {
      padding: 16px 0 auto auto;
    }
    .heart-white {
      color: white;
    }
    .heart-red {
      color: red;
    }
  `}</style>

  
    <>
      <div
        className={heartClassName}
        onClick={function (ev) {
          ev.stopPropagation();
          setLiked(!isLiked);
        }}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          role="img"
          width="1em"
          height="1em"
          preserveAspectRatio="xMidYMid meet"
          viewBox="0 0 1024 1024"
          style={{ height: '10px', width:'10px' }}
        >
          <path
            fill="currentColor"
            d="M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9z"
          />
        </svg>
      </div>
    </>

@PaimanRasoli Hmm, I think the difference between your code and mine is that you used svg to draw the heart. But it didn't solve the main issue though. — Hai Na Zheng, Jul 14 '22 at 13:42
@HaiNaZheng I have replied with an answer below, that should work. — Scar, Jul 14 '22 at 13:43
I have attached this code and tested in live project. This code must work. If not, there must be something wrong in another place. — Zia Yamin, Jul 14 '22 at 16:43

score 0 · Answer 2 · answered Jul 14 '22 at 12:20

From what i see on your browser you are using Next.js which automatically updates and renders out when a variable changes, and you are also not initializing the variable isLiked

This should fix your issue.

import {useState} from "react";

export function MovieCard2(props) {
    const [heartClassName, setHeartClassName] = useState("heart heart-white");
    const [isLiked, setIsLiked] = useState(false);

    function handleLike() {
        setIsLiked(!isLiked);

        if (isLiked) {
            setHeartClassName("heart heart-red");
        } else {
            setHeartClassName("heart heart-white");
        }

    }

    return (
        <>
            <div className={heartClassName} onClick={handleLike}>
                ❤
            </div>

            <style jsx>
                {`

                  .heart {
                    padding: 16px 0 auto auto;
                  }

                  .heart-white {
                    color: white;
                  }

                  .heart-red {
                    color: red;
                  }
                `}
            </style>
        </>
    );
}

Thanks, but unfortunately it didn't work. The issue still exists, the dom element is changed (the classes are applied), but for some reason, the render/UI didn't change — Hai Na Zheng, Jul 14 '22 at 14:04
This is an issue with your browser, i've copy pasted this into a next.js project and when clicking on the heart it turns red. — Scar, Jul 14 '22 at 14:28

React useState() & useEffect: DOM element changed but not rendering

2 Answers2