Pass ethAddress to functional component in react

Technical Issue Reporting
#1

Hi All,

In React Moralis, I have a functional component as follows that is intended to give me the address of any eth wallet.

import { useNativeBalance } from "react-moralis";
import { useMoralis } from "react-moralis";
import { useEffect } from "react";

function WalletBalance(ethADDR) {
  const {
    getBalances,
    data: balance,
    nativeToken,
    error,
    isLoading
  } = useNativeBalance({address:ethADDR});

    return (
        <div className="text-gray-300 italic opacity-80">Wallet Balance: {balance.formatted}</div>
    )
}

export default WalletBalance

From my parent code, I am calling it like this:

<WalletBalance ethADDR={message.get("ethAddress")} />

I have a class called Messages where each chat message stores the users ethAddress.

When I call the function, I get error 400 back from Moralis. However if I change this line in the fuction to hardcode an ethAddress, it works:

This:

  } = useNativeBalance({address:ethADDR});

To this:

  } = useNativeBalance({address:"05x90456908456456lkfgg455"});

Help?

#2

could you provide a minimal complete example that doesn’t work?

#3

hey, @cryptokid thanks for the tips in Discord. Let me know what more you need on the above?

#4

you can make a simple example for example in codesandbox where we could test it easily

#5

Yes I will try that. For now, I had more success with this code. It successfully gives me back a balance, but it’s always the balance of the logged in user, rather than the balance of the ethAddress passed in the variable. It sucessfully console.logs the correct wallet address of the other user, but instead returns the balance of my wallet.

function WalletBalance(ethADDR) {
  console.log(ethADDR)
  const { data: balance } = useNativeBalance(`address:${ethADDR}`);
  console.log(balance.formatted)
    return (
        <div className="text-gray-300 italic opacity-80">Wallet Balance: {balance.formatted}</div>
    )
}
#6

can you try something like this:

 const [addr, setAddr] = useState({ address: "342434242432324"});
#7

Let me try that. But I should stress, that if I hardcode the eth address in, it works.

This only gives me my eth address, even if ethADDR equals something else:

const { data: balance } = useNativeBalance(`address:${ethADDR}`);

But this does work:

const { data: balance } = useNativeBalance(address: "342434242432324"`);

Where would I slot your recommendation into my code?