Warning: Cannot update a component (`HotReload`) while rendering a different component (`Cardprompt`). To locate the bad setState() call inside `Cardprompt`,

[Niti9]

same error occur in my code even you can check that javascript mastery owner who made that video in his own vercel deployed website there is same error happening

[Niti9]

@23Mouad you can resolve this error by changing PromptCard.jsx code by :-

"use client";

import { useState } from "react"; import Image from "next/image"; import { useSession } from "next-auth/react"; import { usePathname, useRouter } from "next/navigation";

function PromptCard({ post, handleEdit, handleDelete, handleTagClick }) { const { data: session } = useSession(); const pathName = usePathname(); const router = useRouter();

const [copied, setCopied] = useState("");

// extra code //where i am destructuring props like 'post.creator.username' and ' post.creator.email

if (!post || !post._id) { console.log(post); return null; // or handle the case gracefully }

const image = post.creator?.image; const username = post.creator?.username; const email = post.creator?.email; const prompt = post?.prompt; const tag = post?.tag; const _id = post.creator?._id;

const handleProfileClick = () => { console.log(post);

if (_id === session?.user.id) return router.push("/profile");

router.push(`/profile/${_id}?name=${username}`);

};

const handleCopy = () => { // setCopied(post.prompt); setCopied(prompt); navigator.clipboard.writeText(prompt); setTimeout(() => setCopied(false), 3000); };

return (

{username}

{email}

  <p className="my-4 font-satoshi text-sm text-gray-700">{prompt}</p>
  <p
    className="font-inter text-sm blue_gradient cursor-pointer"
    onClick={() => handleTagClick && handleTagClick(tag)}
  >
    #{tag}
  </p>

  {session?.user.id === _id && pathName === "/profile" && (
    <div className="mt-5 flex-center gap-4 border-t border-gray-100 pt-3">
      <p
        className="font-inter text-sm green_gradient cursor-pointer"
        onClick={handleEdit}
      >
        Edit
      </p>
      <p
        className="font-inter text-sm orange_gradient cursor-pointer"
        onClick={handleDelete}
      >
        Delete
      </p>
    </div>
  )}
</div>

); }

export default PromptCard;