Error when calling useMoralisWeb3Api

Moralis General
#1

Hi Iā€™m new to react and I am trying to switch from Alchemy to Moralis and use my code from alchemy that was working fine. As of now to test I am simply trying to create a button in my App.js that runs a script when pressed.

In my script I have -

import React from "react";
import { useMoralisWeb3Api } from "react-moralis";

export const mintNFT = async (mintAmount) => {
  const Web3Api = useMoralisWeb3Api();
  console.log("test");
}

And in App.js I try to import -
import { mintNFT } from "./utils/interact.js";

and call -

const onMintPressed = async () => {

    const { status } = await mintNFT();

    setStatus(status);

};

When clicking the button -

<Button id="mintButton" onClick={onMintPressed}>Mint NFT</Button>

I am getting this error in my script -
Line 5:19: React Hook "useMoralisWeb3Api" is called in function "mintNFT" that is neither a React function component nor a custom React Hook function.

How can I refractor this to work as intended?

#2

you can find some react documentation here: https://github.com/MoralisWeb3/react-moralis

you can find more react code here: https://github.com/ethereum-boilerplate/ethereum-boilerplate

you can try this (probably not what you need):


import {useMoralisWeb3Api} from "react-moralis";

function App() {
  const Web3Api = useMoralisWeb3Api();

  const x = async () => {
    try {
      const result = await Web3Api.account.getNativeBalance({
        address: "0xc5442aa3bfcfd998c3d1d5d197e0d8ba689cc3d8",
        chain: "eth"
      });
      console.log(result);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <p></p>
      <p>
        <button onClick={x}> test button</button>
      </p>
    </div>
  );
}

export default App;
#3

Hi thanks for the response. I have checked out the documentation as well as numerous google searches before posting here.

As far as your code, I am aware of doing it on the same App script, I wouldnā€™t have to import things and of course it would be easier but for my situation this is not possible. My script is extensive and I simply cant include the code in my App.js file, so unfortunately the code provided doesnā€™t help :frowning:

1 Like
#4

it works well for you with a simple example in App.js to call a simple web3api function?

for mintNFT you could try to use executeFunction or the equivalent from react-moralis

#5

The code provided executes the call without the error previously mentioned. However, I need to run my code in a separate script as mentioned in my original post.

export const mintNFT = async (mintAmount) => {
const Web3Api = useMoralisWeb3Api();
 console.log("test");
}
#6

that is all you have in that mintNFT function?

#7

No my original code is about 300 lines but I havenā€™t imported that yet cause of this issue. I was able to do it in my alchemy project using it like this in my custom script -

  export const mintNFT = async(mintAmount) => {
code.....
}
#8

=>

Hereā€™s the gotcha, when you are using React Hooks, your functional componentā€™s name MUST start with a capital letter. In this case, the function name is landingPage. If you change it to LandingPage it will work as expected.

#9

Yeah I know, thatā€™s the error I originally mentioned. As I said though, Iā€™m new to react so Iā€™m having a hard time with this which should be simple. Currently my code in interact.js is -

import { useMoralisWeb3Api } from "react-moralis";

export const Minter = () => {
    const Web3Api = useMoralisWeb3Api();
 console.log("test");

}

And when clicking the button from my App.js I am getting this error -
Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

#10

we can wait until someone that knows react responds, all I can do is search google to see what I find

#11

Ok thanks for your help

1 Like
#12

Hi @IDKWID i think iā€™m trying to do the same thing as you which is to modify the https://docs.alchemy.com/alchemy/tutorials/nft-minter tutorial so it uses Moralis instead of Alchemy . Did you have any joy or can anyone else help on this ?

1 Like
#13

I had a similar problem.

React Hook "useMoralisQuery" is called in function "transferMarketPlace" 
that is neither a React function component 
nor a custom React Hook function. 
React component names must start with an uppercase letter. 
React Hook names must start with the word "use" 
 react-hooks/rules-of-hooks

I sorted it out by simply changing ā€œtransferMarketPlaceā€ to ā€œTransferMarketPlaceā€.