Next.js Discord

Discord Forum

profile state is refusing to be set to null

Unanswered
Goldstripe sardinella posted this in #help-forum
Open in Discord
Goldstripe sardinellaOP
When I click on a player, it should set the profile state to the player object which it is doing. but once i try to click on the outer motion.div found in the Profile component, it's refusing to set it back to null. I tried putting alert() functions for debugging and the alert's are showing. but the profile state wont set to null.

codes are in the channel since I dont have nitro I cannot post the whole code in 1 message.

4 Replies

Goldstripe sardinellaOP
type:
type player = { username: string; id: string } | null;
Player:
const Player = ({
  player,
  placement,
}: {
  player: { username: string; id: string };
  placement: number;
}) => {
  const [profile, setProfile] = useState<player>(null);

  useEffect(() => console.log(profile), [profile])

  return (
    <div
      onClick={() => setProfile(player)}
      className="w-full h-14 bg-gray-600/15 py-1 px-8 flex justify-center flex-col hover:bg-gray-600/5 cursor-pointer player-transition-effect"
    >
      <div className="w-fit grid grid-cols-8 items-center gap-7">
        <strong
          className={`${
            placement + 1 === 1
              ? "text-yellow-500"
              : placement + 1 === 2
              ? "text-gray-300"
              : placement + 1 === 3
              ? "text-amber-700"
              : "text-gray-500"
          } font-extrabold text-3xl col-span-2`}
        >
          #{placement + 1}
        </strong>
        <strong className="text-2xl col-span-2">{player.username}</strong>
      </div>
      <Profile profile={profile} removePlayer={() => setProfile(null)} />
      {/* {profile && <Profile player={profile} removePlayer={() => setProfile(null)} />} */}
    </div>
  );
};
Profile: 
const Profile = ({ profile, removePlayer }: { profile: player, removePlayer: () => void; }) => {

  useEffect(() => {
    console.log(profile)
    if(profile) {
      document.documentElement.style.overflow = "hidden";
    } else {
      document.documentElement.style.overflow = "auto";
    }
  }, [profile]);


  return createPortal(
    <AnimatePresence>
      {profile && (
        <motion.div
        onClick={removePlayer}
        initial={{opacity: 0}}
        animate={{opacity: 1}}
        exit={{opacity: 0}}
        className="fixed inset-0 z-[100] bg-black/80 flex items-center justify-center"
        >
          <motion.div
            onClick={e => e.stopPropagation()}
            initial={{ opacity: 0, y: -5 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -5 }}
            className="max-w-lg w-full bg-gray-700 rounded-2xl overflow-hidden"
          >
            <div className="w-full h-20 relative bg-gray-800">
              <span className="absolute -bottom-12 left-4 bg-gray-800 rounded-full size-24 flex">

              </span>
              <span className="absolute -bottom-3.5 left-28 rounded-xl bg-gray-800 p-1 flex items-center text-left">
                <strong className="font-bold text-3xl">{profile.username}</strong>
              </span>
            </div>
            <div className="px-4 py-12">
              Lorem, ipsum dolor.
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>,
    document?.body
  );
};
-# please ping me when responding.