getNFTsForContract in react not working

Moralis General
#1

Hi I am trying to get the NFTs a user owns, based on the contract address I provide. I tried using the docs and examples provided but I cant get anything to work. I have a simple project I created using the starter tutorial. I’m using visual studio and react. I commented out the other methods I tried getting to work -

import {

  Button,

  Container,

  Box,

  Heading,

  Alert,

  AlertIcon,

  AlertTitle,

  AlertDescription,

  CloseButton

} from "@chakra-ui/react";

import { useMoralis } from 'react-moralis';

import  { Moralis } from 'moralis';

//const options = { chain: 'rinkeby', token_address: '0x00...' };

//const polygonNFTs = async () =>{await Moralis.Web3API.account.getNFTsForContract(options)};

const options = { chain: 'eth', token_address: '0x00..'}

const nfts = async () =>{await Moralis.Web3API.getNFTsForContract(options)};

function App() {

  const { authenticate, isAuthenticated, isAuthenticating, authError, logout, user } = useMoralis();

  //const options = { chain: 'eth', token_address: '0x1b61748EEB5da53B5444D42ce8878712ea9aBe14' };

  //const pixlaNFTs = async () =>{ await Moralis.Web3API.account.getNFTsForContract(options)};

//const { getNFTBalances, data, error } = useNFTBalances();

/*const NFTBalances = () => {

  return (

    <div>

      {error && <>{JSON.stringify(error)}</>}

      <Button onClick={() => getNFTBalances({ params: { chain: "eth" } })}>Refetch NFTBalances</Button>

      <pre>{JSON.stringify(data, null, 2)}</pre>

    </div>

  );

};*/

  if(isAuthenticated){

    return <Container>

    <Heading>Welcome, {user.attributes.username}. {nfts}</Heading>

    <Button onClick={() => logout()}>Disconnect</Button>

    </Container>

  }

  return <Container>dApp

{authError &&(

<Alert status='error'>

  <AlertIcon />

  <Box flex='1'>

    <AlertTitle>Authentication has failed</AlertTitle>

    <AlertDescription display='block'>

      {authError.message}

    </AlertDescription>

  </Box>

  <CloseButton position='absolute' right='8px' top='8px' />

</Alert>

)}

 <Button isLoading={isAuthenticating} onClick={() => authenticate()}>Authenticate</Button>

 </Container>;

}

export default App;

I need to return how many NFTs the user owns from a specific contract and get the tokenID. I need these variables to interact with my smart contract to allow free minting for those users.

#2

Hi @IDKWID
Can you specify what error you are getting?

#3

My current attempt looks like this -

import {

  Button,

  Container,

  Box,

  Heading,

  Alert,

  AlertIcon,

  AlertTitle,

  AlertDescription,

  CloseButton

} from "@chakra-ui/react";

import { useMoralis } from 'react-moralis';

import  { Moralis } from 'moralis';


function App() {

  const { authenticate, isAuthenticated, isAuthenticating, authError, logout, user } = useMoralis();

  const options = { chain: 'eth', token_address: '0x00....' };

  const NFTs = async () =>{ await Moralis.Web3API.account.getNFTsForContract(options)};

 
  if(isAuthenticated){

    return <Container>

    <Heading>Welcome, {user.attributes.username}. {NFTs}</Heading>

    <Button onClick={() => logout()}>Disconnect</Button>

    </Container>

  }

  return <Container>dApp

{authError &&(

<Alert status='error'>

  <AlertIcon />

  <Box flex='1'>

    <AlertTitle>Authentication has failed</AlertTitle>

    <AlertDescription display='block'>

      {authError.message}

    </AlertDescription>

  </Box>

  <CloseButton position='absolute' right='8px' top='8px' />

</Alert>

)}

 <Button isLoading={isAuthenticating} onClick={() => authenticate()}>Authenticate</Button>

 </Container>;

}

export default App;

And when running it, I am getting this error in the console - Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

#4

Hi @IDKWID
remove return before <Container>

Check this link from stackoverflow: https://stackoverflow.com/questions/48458334/functions-are-not-valid-as-a-react-child-this-may-happen-if-you-return-a-compon

#5

Hey you seem just calling the Web3API but not storing it anywhere, you should check whether or not the request is made in the network tab of the browser

but then again I didn’t see where you called NFTs in, seems like it was never called anywhere

1 Like
#6

Sorry I dont understand what you mean by storing the call.

const NFTs = async () =>{ await Moralis.Web3API.account.getNFTsForContract(options)};

Also I called the NFTs here -
<Heading>Welcome, {user.attributes.username}. {NFTs}</Heading>

#7

I mean store it in a state, which you can then use it to render the component

now NFTs will be returning null coz you don’t have any return word in there.

Also I’m not sure what do you wanna display in your component, but the output of the Web3API is going to be JSON so if you’re going to display it there as {NFTs} you better stringify it first, otherwise there’s potentially an error appear, or at the very least not a good coding practice