Passing props into URL in button using Nextjs

Question

This is for an NFT minting dAPP. I have 4 different NFTs minting pages in my web app built with nextjs, and after each one is minted I have a button appear that says "View on OpenSea".

When you click on this button, I'd like it so that it will open a new tab and send you to the individual listing to a link that looks like:

"testnets.opensea.io/assets/mumbai/0xb636c1a63c3b092a7c74304b1947b0162d08a1e4/0".

0xb63... being the contract address, and /0 being the tokenID. I have the tokenId saved in a data file, passing that prop into other areas of my app. But I can't figure out how to get it into a URL.

This is what I have so far:

  const url =
    "testnets.opensea.io/assets/mumbai/0xb636c1a63c3b092a7c74304b1947b0162d08a1e4/{props.id}";
  window.open(url, "_blank");
};

But it doesn't work. Any help on this is appreciate. Here is a link to that line in my repo: https://github.com/redbrickmedia/rdbrck-nft/blob/0872e3bbd69ae12ff2b2d5532d5e0da0c78663fa/components/Buttons.js#L52

Some random IT boy · Accepted Answer · 2022-06-20 22:49:51Z

0

Just tried your code and works fine but my browser automatically blocks programmatic popups. I'd suggest to replace the button with an <a href="url" target="_blank"> and make it look like your FilledButton.

Maybe it's because your prop is not getting interpolated, try the following:

function YourComponent(props) {
  const targetUrl = `https://testnets.opensea.io/assets/mumbai/0xb636c1a63c3b092a7c74304b1947b0162d08a1e4/${props.id}`

   return (
      <a href={targetUrl}> Click here</a>
   )
}

edited Jun 20, 2022 at 22:49

answered Jun 20, 2022 at 22:00

Some random IT boy

8,5653 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bear Grillz Over a year ago

I tried it, as an <a /> tag as well, and it tries to take me to "localhost:3000/testnets.opensea.io/assets/mumbai/…"

Some random IT boy Over a year ago

Make sure to prefix with the uri scheme: https://testnet...

Bear Grillz Over a year ago

Yes I have added that:

<a href="https://testnets.opensea.io/assets/mumbai/0xb636c1a63c3b092a7c74304b1947b0162d08a1e4/{props.id}"                     target="_blank"                   >                     View on OpenSea                   </a>

Again, it's taking me to: "testnets.opensea.io/assets/mumbai/…". It's as if it isn't recognizing the prop at all, or the curly brackets

Some random IT boy Over a year ago

try with the code snippet I've just added. Perhaps react was recognizing {props.id} as part of the string instead of interpolating the value into it

Bear Grillz Over a year ago

That worked, wow thank you so much! Is there a way to style it just like the button I had there previously?

|

Collectives™ on Stack Overflow

Passing props into URL in button using Nextjs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related