How to handle post data in next js

Question

I'm calling a XRP function for fetching nft token in XRPL I'm getting object in return but I can not use it in frontend below is my code. I'm trying to use the objects in fields such URI.

import React, { useState } from "react";

import styles from "../styles/Home.module.css";

const Sellnft = () => {
  const handleSubmit = async (e) => {
    e.preventDefault();

    const data = {
      walletAddress: e.target.walletAddress.value,
    };
    const JSONdata = JSON.stringify(data);

    const endpoint = "/api/getnft";
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSONdata,
    };
    const response = await fetch(endpoint, options);
    const result = await response.json();
    console.log(result.result.account_nfts[0].URI);
    console.log(response);
  };
  return (
    <div>
      <main className={styles.main}>
        <h1 className={styles.title}>Sell your NFT</h1>

        <p className={styles.description}>Look for the Nft you want to sell</p>
        <div className={styles.containerWhite}>
          <form onSubmit={handleSubmit}>
            <label htmlFor="walletAddress">Account Address:</label>
            <input type="text" name="walletAddress" id="walletAddress" />
            <br />
            <button type="submit">Search NFT</button>
          </form>
        </div>
      </main>
    </div>
  );
};

export default Sellnft;

In which case I'm receiving JSON object as:

{"id":0,"result":{"account":"raYWR63SR2dbLXZZXMh8fSgr6bpM5HZP34","account_nfts":[{"Flags":8,"Issuer":"raYWR63SR2dbLXZZXMh8fSgr6bpM5HZP34","NFTokenID":"000800003CCE164B86BC092E54E65C493CDA58506E6911120000099B00000000","NFTokenTaxon":0,"URI":"68747470733A2F2F697066732E696E667572612E696F2F697066732F516D564E6B727A704570793774444D38385374646572646D65547753535834366E716F6454425A784E6335443246","nft_serial":0}],"ledger_current_index":4105324,"validated":false},"type":"response"}

The problem I'm facing is I can not render it on my frontend as I only require URI and Token ID. Which I will be sending as prop to my next component. Is there any way to map this data.

This is my request which has successfully shown the results.

const xrpl = require("xrpl");

export default async function mintNft(req, res) {
  const net = "wss://xls20-sandbox.rippletest.net:51233";
  const standby_wallet = xrpl.Wallet.fromSecret(req.body.walletAddress);
  const client = new xrpl.Client(net);
  await client.connect();
  console.log(standby_wallet);

  const nfts = await client.request({
    method: "account_nfts",
    account: standby_wallet.classicAddress,
  });
  let results = "nfts: " + JSON.stringify(nfts, null, 2);
  res.send(nfts);
  client.disconnect();
}

---

Answer 1

Well I sorted it out somehow the issue was I had to exclude post API request from form submission function, as we can not use hooks in second callback argument I had to execute a side effect in which order useEffect was necessary to save data in state this is my working code:

const Sellnft = () => {
  const [nft, setNft] = useState([]);
  const [walletAddress, setWalletAddress] = useState("");

  async function fetchNft() {
    const data = {
      walletAddress: walletAddress,
    };

    const JSONdata = JSON.stringify(data);
    axios
      .post("/api/getnft", JSONdata, {
        headers: { "Content-Type": "application/json" },
      })
      .then((response) => {
        setNft(response.data.result);
      })
      .catch((error) => {
        console.log(error);
      });
  }
  console.log(nft);

  const handleSubmit = async (e) => {
    e.preventDefault();

    fetchNft();
  };
  return (
    <div>
      <main className={styles.main}>
        <h1 className={styles.title}>Sell your NFT</h1>

        <p className={styles.description}>Look for the Nft you want to sell</p>
        <div className={styles.containerWhite}>
          <form onSubmit={handleSubmit}>
            <label htmlFor="walletAddress">Seed Address:</label>
            <input
              type="text"
              name="walletAddress"
              id="walletAddress"
              value={walletAddress}
              onChange={(e) => setWalletAddress(e.target.value)}
            />
            <br />

            <button type="submit">Search NFT</button>
          </form>
          <div>
            <NftList nft={nft} />
          </div>
        </div>
      </main>
    </div>
  );
};

export default Sellnft;