Using Nextjs to pass props into a URL via a button

For my NFT minting dAPP, I have incorporated 4 unique NFT minting pages within my nextjs web app. After each successful minting, a button dynamically appears labeled "View on OpenSea".

Upon clicking this button, the intention is to open a new tab directing users to the individual listing through a URL structured as follows:

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

The contract address (0xb63...) and tokenID (/0) are vital components of this URL link. While I have successfully stored the tokenId in a data file and passed it as a prop across various sections of my application, I am struggling with incorporating it into the URL.

This is what my current code snippet looks like:

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

Regrettably, this implementation does not yield the desired outcome. Any guidance or assistance regarding this matter would be greatly appreciated. For reference, here is the specific line of code in my repository: https://github.com/redbrickmedia/rdbrck-nft/blob/0872e3bbd69ae12ff2b2d5532d5e0da0c78663fa/components/Buttons.js#L52

javascripturlnext.jsnftopensea

Answer №1

After testing out your code, I found that it works well. However, my browser automatically blocks programmatic popups. To work around this, I recommend replacing the button with an 

<a href="url" target="_blank">
and styling it similar to your FilledButton.

It's possible that the prop is not being interpolated correctly. You can try the following approach:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a circular sun in Opengl and three.js: a step-by-step guide

Currently, I am working on enhancing an atmospheric shader based on the glsl-atmosphere library while using three.js. Initially, I applied these shaders to a sphere and achieved excellent results :) The original shaders lacked sun drawing elements, so I ...

javascriptthree.jsglslwebglshader

Turning various functions associated with different buttons into a universal function using a select element: How to make it possible?

Is there a way to make the load buttons Java functions work from a single button within a selection box, rather than having two separate buttons triggering different JavaScript functions? To clarify the question further: I have two distinct functions that ...

javascriptjavajqueryhtmlupload

How to animate the needle image in a speedometer using jQuery

My project involves a background image of a speedometer. I am working on positioning the needle accurately without animation. The position of the needle in the half circle must reflect the value (speed) it represents. Instead of answers, I am seeking rec ...

javascriptjquery

Angular directive fails to consistently trigger jQuery event

My directive is only triggering once, and it's happening when the page is loaded with the directive. What could be causing this issue? HTML - <div class="body"> <a href="#/systems"><div class="viewBySys"></div></a> ...

javascriptjqueryangularjs

What is causing this issue with the ajax call not functioning correctly?

$(document).ready(function(){ $('.clickthetext').click(function(){ $.post("submit.php", $("#formbox").serialize(), function(response) { $('#content').html(response); }); return false; }); ...

javascriptphpjqueryajax

Issue with reactivity in deeply nested objects not functioning as expected

Currently, I am utilizing Konvajs for my project. In simple terms, Konvajs provides a canvas for drawing and editing elements such as text nodes that can be manipulated by dragging and dropping. These nodes are organized within groups, which are then added ...

javascriptvue.jsvuejs2

Allow the response to be returned in the parent function by using the $.post method

I have a question regarding this particular code snippet: null. Why is the server_request function not returning the responseText as expected? And how can I modify it to achieve the desired outcome?</p> ...

javascriptjqueryajax

Error Alert: LocalStorage is undefined in this context - NextJS

Having trouble retrieving access and refresh tokens from local storage. Each attempt results in a 500: Internal Server Error, with an error indicating LocalStorage is undefined. Research suggests that LocalStorage may not be compatible with rendering with ...

javascriptreactjslocal-storagenext.js

A guide on converting nested arrays of objects in JavaScript

I am faced with transforming an array of Objects that contain a nested structure. Here is an example of the data: [ { geography: 'Austia', product: 'RTD Coffee', dataType: 'Off-Trade rsp (curr/con, lo ...

javascriptarraystypescript

Angular application across multiple subdomains

Currently creating an angular application that allows users to generate and share digital books with a subdomain link like mycoolbook.theappsite.com. However, I've set up the routes so that editing books are at the URL "mycoolbook.theappsite.com/sett ...

javascriptangularjshttp

Starting point for Angular 2 app setup

What is the best way to handle data initialization in my app? For instance, if a user logs in and presses F5, I need to retrieve the current user data from the server before any other queries are executed, such as getting the user's orders. In Angular ...

javascriptangularjsangular

The module specifier "logrocket" could not be resolved, make sure to use either npm or

I'm currently having an issue with initializing LogRocket. I followed the steps from the official documentation: I successfully installed it using node: npm i --save logrocket However, when trying to initialize it on my page earlier with: < ...

javascriptnpmmoduleyarnpkglogrocket

Refresh text box according to various radio buttons

I am new to jQuery and currently working on a script to dynamically update a textarea based on selected radio buttons. Here are the radio button options: <input type='radio' name='color'>Red <input type='radio' name ...

javascriptjquery

How to delete vertices and their properties from a BufferGeometry using Three.js

In my Three.js project, I have a large collection of point cloud forms grouped together in a single Points object for efficient rendering using BufferGeometry in WebGLRenderer. The program allows users to interactively select a form from the point cloud, w ...

javascriptarraysgraphicsthree.js

Is it achievable to remove the wrapper from elements using jQuery?

Is it possible to modify this markup without altering core files in the CMS? I have a particular structure that I would like to adjust using jQuery for a temporary solution. <div class="homepage-boxes"> <div class="row-fluid"> < ...

javascriptjqueryhtml

Rotation of objects using Three.js on a spherical surface

I have successfully implemented a particle system to evenly distribute points on a sphere and then place instances of a given geometry on those points. Now, I am looking to rotate those geometries to match the surface angle of the sphere. Below is the cur ...

javascriptmaththree.jsgeometry

Unable to change the value of a variable in a function in AngularJS

Calling all developers for assistance! I am experiencing an issue with updating a value dynamically inside an AngularJS controller that is being passed to an HTML tag. Everything works perfectly when updating the value outside of a function: var app = angu ...

javascripthtmlcssangularjs

In JavaScript, create a function that takes a String as input, moves the first letter of each word to the end of that word, appends "ay" to the end, and returns the transformed String

My current progress is: function pigIt(str) { //split the string into an array of words let words = str.split(" "); //iterate through the array of words for (let i = 0; i < words.length; i++) { //loop through individual words for (le ...

javascriptarraysstringfor-loopconcatenation

Ways to reach a variable beyond a subfunction in javascript

Below is a function I have created that utilizes a GLTF loader to import a model into the scene from another class: LoadModel(path){ this.gltfLoader.load( path, (gltf) => { this.scene.add(g ...

javascriptthree.js

Issue with Custom Tooltip in Mootools 1.2 - Images displaying prematurely before hover action

Encountering an issue with Mootools 1.2 Tips (custom tooltips) We are currently utilizing Joomla with the latest update that includes Mootools 1.2, and I am working with the following JS code: $$('.tipz').each(function(element,index) { ...

javascriptmootoolstooltip