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

[23Mouad]

No description provided.

[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 (

      <div className="flex flex-col">
        <h3 className="font-satoshi font-semibold text-gray-900">
          {username}
        </h3>
        <p className="font-inter text-sm text-gray-500">{email}</p>
      </div>
    </div>

    <div className="copy_btn" onClick={handleCopy}>
      <Image
        src={
          copied === prompt
            ? "/assets/icons/tick3.png"
            : "/assets/icons/copy2.png"
        }
        alt={copied === prompt ? "tick_icon" : "copy_icon"}
        width={12}
        height={12}
      />
    </div>
  </div>

  <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;