Function after nft show using nextjs

I have seen the video https://www.youtube.com/watch?v=7TKqLJd_aYI

after I have rendered the nft in the wallet users.
I would like to call a function but the call to the function is not working and I canā€™t see the error, with console log I can see the click is correct

this is what my dapp


this is my code

  // //for staking contract
  const contractProcessor = useWeb3ExecuteFunction();

  async function stake(val) {
    let options = {
      contractAddress: "0x21daB594d4726d1e12fAD9b5aE7EE270C07F6b75",
      functionName: "stakeNft",
      abi: abi,
      params: {
        note: "Thanks for your work",
      },
      msgValue: val,
    };
    console.log(val);

    await contractProcessor.fetch({
      params: options,
      onSuccess: () => {
        console.log("Approval Received");
      },
      onError: (error) => {},
    });
  }

in the return

  {isWeb3Enabled ? (
                <button
                  className={styles.stake_btn}
                  // value={nft.token_id}
                  onClick={() => stake(parseInt(nft.token_id))} //() => runContractFunction()
                  //    onClick={() => runContractFunction({ params: nft.token_id })} //() =>
                >
                  Stake# {nft.token_id}
                </button>
              ) : null}

you can add more lines with console.log in that stake function to see what it happens, like where it stops working

it is not entering to
contractProcessor.fetch,
I have an assumption,
because I am rendering the nft, the page keeps refreshing on each change and the function is not called.
I donā€™t know if it is true or how to change it. since I am rendering the nfts using moralis function and run a map on it

Looks fine to me unless the use of the hook is incorrect. So you can see the val logged but not Approval Received? Log the error too.

wdym use of the hook is incorrect?
I canā€™t see any errors, the only last log is from the log(val)

may my assumption is correct ?
since the page is loading on each state (click also) it is deleting the function request I made. what do you think?

I meant if the parameters were incorrect, I assume they are, Iā€™m not aware of how to use useWeb3ExecuteFunction. Nope nothing is refreshing the page.

Try storing the await contractProcessor.fetch in a variable and logging it.

it looks the same to me ā€“ minute if the video 13:14.
can you suggest me another function for me to use, that will provide the same result?
I tried some, but had some failures in the way.

So are you still not getting any logs or anything happening?

I have no problem running the example in the video you linked adapted on your code. With the example contract, Iā€™m prompted to donate through MetaMask, I sign it, and then I get an ā€œApproval Receivedā€ in my console.

import { useEffect } from 'react';

import { Moralis } from 'moralis';
import { useWeb3ExecuteFunction } from 'react-moralis';

function App() {
  useEffect(() => {
    async function init() {
      await Moralis.enableWeb3();
    }

    init();
  }, []);

  const contractProcessor = useWeb3ExecuteFunction();

  async function stake(val) {
    let options = {
      contractAddress: '0x356d2E7a0d592bAd95E86d19479c37cfdBb68Ab9',
      functionName: 'newDonation',
      abi: [
        {
          inputs: [{ internalType: 'string', name: 'note', type: 'string' }],
          name: 'newDonation',
          outputs: [],
          stateMutability: 'payable',
          type: 'function',
        },
      ],
      params: {
        note: 'Thanks for your work',
      },
      msgValue: Moralis.Units.ETH(val),
    };

    await contractProcessor.fetch({
      params: options,
      onSuccess: () => {
        console.log('Approval Received');
      },
      onError: (error) => {
        console.log('error', error);
      },
    });
  }

  return (
    <div className="App">
      <button
        // value={nft.token_id}
        onClick={() => stake('0.1')} //() => runContractFunction()
        //    onClick={() => runContractFunction({ params: nft.token_id })} //() =>
      >
        Stake#
      </button>
    </div>
  );
}

export default App;

I modified the code you sent me and it seems to get an output .
thank you

can you point on how to retrieve a value from the smart contract
without inserting any params ?

and maybe a proper doc showing all the functionalities how to use the different libraries and write functions like using the NFTTransfers() and implementing both ways of transaction - from and to .

other than https://github.com/MoralisWeb3/react-moralis#usenftbalances
thanks

You have react examples in the docs as well - for example for nft transfers https://docs.moralis.io/moralis-dapp/web3-sdk/account#getnfttransfers. Just make sure to select react for the code example.

Also for calling a contract function (I am assuming that is how you are planning on getting your value?) without any parameters, just pass in an empty object as params

Thank you for your reply
however I am looking at the docs before I am asking questions.
I didnā€™t find any answer and I am facing an error on the dapp, so I may use the function wrongly.

this is how I am using the function

  const options = {
    chain: 97,
    token_address: "0x0cb6F4fE6b7F3f57460Bd968D6EF72019928c854",
    direction: {
      from_address: account,
      to_address: "0x21daB594d4726d1e12fAD9b5aE7EE270C07F6b75",
    },
  };

  const { fetch, data, error, isLoading, isFetching } = useNFTTransfers();

but this way creates duplicates this is the error .
ā€œnext-dev.js?3515:32 Warning: Encountered two children with the same key, 1. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted ā€” the behavior is unsupported and could change in a future version.ā€

for the second question:
did you mean like that ?

  async function unstakeNft() {
    let options = {
      contractAddress: "0x21daB594d4726d1e12fAD9b5aE7EE270C07F6b75",
      functionName: "unstakeNft",
      abi: abi,
      params: ""
}

Are you sure the way you are calling the functions is what is wrong here? Since you get an error related to keys?

And for the 2nd part, no I meant params: {}, pretty sure that should work

I am mapping the result according to the tokenId
so basically this is the only place it is wrong,
the to option is not working
I can see the token I staked with all the other user nfts in wallet

  //nft contract
  const options = {
    chain: 97,
    direction: "to",
    address: "0x21daB594d4726d1e12fAD9b5aE7EE270C07F6b75",
  };

  const { fetch, data, error, isLoading, isFetching } = useNFTTransfers();

......
.....

 {data &&
          data?.result.map((nft) => {
            return (
              <div key={nft.token_id} className={styles.card}>
            
              </div>
            );
          })}