setState is not working

Question

This is a function where I try to pin an NFT metadata on IPFS and then store the URL in a state variable called tokenUrl. Once the pinning process is done, I need my related state variable to be updated, and my write() function should be executed afterward, as shown in the code.

        const added = await client.add(metadata);
        const url = `https://infura-ipfs.io/ipfs/${added.path}`;

        setTokenUrl(url);

        console.log("Token's Metadata created!")
        console.log(`Token URL: \n\n ${url}`);
        console.log("Minting...")

        console.log(tokenUrl);
        write?.()

However, after going through the process several times, I figured out that setTokenUrl is not storing the URL in my local state variable. Therefore, my write?.() function, which is a Hook ( By Wagmi ) and needs tokenUrl as a parameter, does not work as intended, resulting in an unsuccessful minting process.

In other words, console.log(tokenUrl) prints null.

Can someone clarify for me why the setTokenUrl( ) is not working?

Thank you so much for your attention and participation.

Answer 1

In general, using the new value of the assigned state variable is impossible within the same function where the state variable has already been assigned in which!

In other words, within a single function, when a state variable is updated by setState( ), the new value cannot be accessed through the rest of the function.

This is because, in React, we should wait until the next render to use the new value of the state variable we just updated.