How do I make the Link appear above the component I made?

Question

How do I make the Link appear above the component I made? Im using Next.js 11 version.

This is error message.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Link`.

This is my source code.

const data = [1, 2, 3, 4, 5, 6, 7, 8];

const ContentByMenu = () => {
    switch (menu) {
      case "asset": {
        return data.map((data, key) => {
          console.log(data, key);
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <AssetCard
                like={data}
                asset={data}
                token={data}
                price={data}
                key={key}
                className="pointer"
              />
            </Link>
          );
        });
      }

      case "token": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/token/detail?asset=${data}`} key={key}>
              <TokenCard token={data} contents={data} key={key} />
            </Link>
          );
        });
      }

      case "account": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <AccountCard account={data} key={key} />
            </Link>
          );
        });
      }
    }
  };

The Card Component is simply ui data and const data is temporary data. I think it's wrong to embed comp in links. What should I do?

Where is a React ref being used? Can you clarify what you mean by "How do I make the Link appear above the component I made"? Please add the entire error message and stacktrace, and all relevant code to your question. It seems the issue is in the `Link` component. — Drew Reese, Jul 31 '21 at 04:15
I don't use ref. As mentioned above, component is a simple ui component — Jundev, Jul 31 '21 at 05:04
Well, the error implies a React ref is being passed to a function component and to check the render of the `Link` component. That's a pretty good place to start looking. What are you referring to as or mentioning is a simple UI component? The `Link` component? The card component (*what, or which, card component*)? — Drew Reese, Jul 31 '21 at 05:23
Here's a [link](https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx#L109-L326) to the `Link` source code. It doesn't consume or forward React refs, so what I suspect has occurred is somewhere you've possibly typoed a `href` prop into a `ref` prop by mistake, possibly also having fixed the typo when forming your code snippet here in your question. Can you check *all* your `Link` component and validate you aren't passing a `ref` prop to any of them? — Drew Reese, Jul 31 '21 at 19:34

score 0 · Answer 1 · answered Jul 31 '21 at 10:38

for the first, you should import Link

import Link from 'next/link';

then you should use tag a

    const data = [1, 2, 3, 4, 5, 6, 7, 8];

    const ContentByMenu = () => {
        switch (menu) {
          case "asset": {
            return data.map((data, key) => {
              console.log(data, key);
              return (
                <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
             <a> 
<AssetCard
                like={data}
                asset={data}
                token={data}
                price={data}
                key={key}
                className="pointer"
              />
</a>
            </Link>
          );
        });
      }

      case "token": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/token/detail?asset=${data}`} key={key}>
              <a>
<TokenCard token={data} contents={data} key={key} />
</a>
            </Link>
          );
        });
      }

      case "account": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <a>
<AccountCard account={data} key={key} />
</a>
            </Link>
          );
        });
      }
    }
  };

How do I make the Link appear above the component I made?

1 Answers1