solana?address=undefined issue

[lakshitha1629]

Hi folks,

we are trying to implement the upload Metadata function but solana?address=undefined

---- My code ----

import "./App.css";
import { Metaplex, keypairIdentity, bundlrStorage } from "@metaplex-foundation/js";
import { Connection, clusterApiUrl, Keypair, PublicKey, LAMPORTS_PER_SOL } from "@solana/web3.js";
import { useState } from "react";

function App() {
  const connection = new Connection(clusterApiUrl("devnet"));
  const wallet = Keypair.generate();

  const metaplex = Metaplex.make(connection)
    .use(keypairIdentity(wallet))
    .use(bundlrStorage({
      address: 'https://devnet.bundlr.network',
      providerUrl: 'https://api.devnet.solana.com',
      timeout: 60000
    }));

  const [address, setAddress] = useState(
    "3ijFZcJKmp1EnDbbuaumWYvEFbztx9NRupwTXTchK9bP"
  );
  const [nft, setNft] = useState();
  const fetchNft = async () => {
    const nft = await metaplex.nfts().findByMint(new PublicKey(address)).run();
    setNft(nft);
    console.log(nft);
  };

  const [imageFile, setImageFile] = useState([]);

  const handleNFT = async () => {

    const { uri } = await metaplex
      .nfts()
      .uploadMetadata({
        address: new PublicKey(address),
        name: "My NFT",
        description: "My description",
        image: "https://arweave.net/5bd58f4V4UEuTl1MGFX1dn1tu3dQTKWo7fCeZyEqQzc",
      })
      .run();

    console.log(uri)

  };

  const onChangeFile = (e) => {
    setImageFile(e.target.files);
  };

  return (
    <div className="App">
      <div className="container">
        <h1 className="title">NFT Mint Address</h1>
        <div className="nftForm">
          <input
            type="text"
            value={address}
            onChange={(event) => setAddress(event.target.value)}
          />
          <button onClick={fetchNft}>Fetch</button>
        </div>

        <div>
          <input type="file" name="file" onChange={onChangeFile} />
          <button onClick={handleNFT}>Create NFT</button>
        </div>

        {nft && (
          <div className="nftPreview">
            <h1>{nft.name}</h1>
            <img
              src={nft.json.image}
              alt="The downloaded illustration of the provided NFT address."
            />
          </div>
        )}
      </div>
    </div>
  );
}

export default App;