Passing props into URL in button using Nextjs-CodePudding

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

CodePudding user response：

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>
   )
}