#Component rendering incorrectly when Link is present

25 messages · Page 1 of 1 (latest)

verbal falcon
#

The expected behavior for my website is that these cards render like in the first image, but it's rendering like in the second image (for the first two seconds, which causes a hydration error).

Here's the snippet of code which makes the error happen:

<p className="text-neutral-400 font-semibold text-xs">
  {authors.map((author, i) =>
    <span key={i}>
      <Link
        href={`/artist/test`}
        className="hover:underline"
      >
        {author}
      </Link>
      {i < authors.length - 1 && (
        ', '
      )}
    </span>
  )}
</p>

The thing that causes the cards to render wrong is the "Link" component, the author's in the card are supposed to be routable, but when adding the Link, it screws the whole component up. The third image shows how it renders in the html (the content being outside of the <a> tag).

image.png image.png image.png
merry irisBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
charred niche
#

show me the hydration error

verbal falcon
#

sure, give me a sec

#

I get these three everytime I refresh the page

wraith pagoda
#

try adding a useEffect that first checks if the component is mounted before mapping the data

wet needle
verbal falcon
wraith pagoda
verbal falcon
verbal falcon
#

Here's the simplified page:

import Body from "@/components/layout/Body"
import AlbumCard from "@/components/card/AlbumCard"

export default async function Home() {
    const albums = [
        { id: "blah", name: "blah", image: "blah", authors: ["blah", "blah2"] }
    ]
    return (
        <>
            <div
                className="absolute z-0 inset-x-0 h-96 rounded-t-[--radius] bg-gradient-to-b from-purple-950 to-transparent"
            />
            <Body>
                <h2 className="mt-4 text-white text-2xl font-bold">Latest releases</h2>
                <div className="grid grid-cols-1 gap-4 @xs:grid-cols-2 @md:grid-cols-3 @2xl:grid-cols-4 @4xl:grid-cols-5 @5xl:grid-cols-6 @6xl:grid-cols-7">
                    {albums.map(album =>
                        <AlbumCard
                            key={album.id}
                            name={album.name}
                            href={`/album/${album.id}`}
                            image={album.image}
                            authors={album.authors}
                        />
                    )}
                </div>
            </Body>
        </>
    )
}
wet needle
verbal falcon
#

And here's the AlbumCard component:

export default function GenreCard({
    name,
    authors,
    image,
    href,
}: Props) {
    return (
        <Link
            href={href}
            draggable="false"
            className="h-full"
        >
            <div className="group p-4 pb-6 flex flex-col bg-neutral-900 hover:bg-neutral-800 transition-colors gap-2 rounded-[--radius] overflow-hidden">
                <div className="relative aspect-square transition-transform group-hover:-translate-y-1">
                    <Image
                        src={image}
                        alt={"blah"}
                        fill
                    />
                </div>
                <h2 className="mt-2 truncate overflow-hidden text-white text-md font-bold drop-shadow-xl">
                    {name}
                </h2>
                <p className="text-neutral-400 font-semibold text-xs">
                    {authors.map((author, i) =>
                        <span key={i}>
                            <Link
                                href={`/artist/test`}
                                className="hover:underline"
                            >
                                {author}
                            </Link>
                            {i < authors.length - 1 && (
                                ', '
                            )}
                        </span>
                    )}
                </p>
            </div>
        </Link>
    )
}
verbal falcon
wet needle
verbal falcon
wet needle
#

you have to rewrite it so that the link elements are not nested

wet needle
verbal falcon
#

It initially renders wrong and then shows it the way I intended, but yeah it causes the hydration error

verbal falcon
wet needle
verbal falcon
#

well I'll fix it right now, thanks again!