why is my variable undefined in reactjs with web3

Question

I am trying to use reactJS to show the balance of an Ethereum wallet with web3. My code successfuly gets the balance and outputs it to the console, however when i try to assign it as a variable and display it in html i get the following error: Line 19:37: 'etherval' is not defined no-undef

The script:

import React from 'react';
import Web3 from 'web3'

export default function balances() {

const web3 = new Web3(new Web3.providers.HttpProvider('https://****'));
web3.eth.getBalance("0x****", function(err1, balance) {
{
    console.log(web3.utils.fromWei(balance, "ether") + " ETH")
    const etherval = web3.utils.fromWei(balance, "ether");
  }
})

  return (
    <div className="details">
      <div className="container">
        <div className="row">
          <div className="col-md-12">
                      <h2>Balance: {etherval}</h2>

          </div>
        </div>
      </div>
    </div>
  );
}

i have tried to initialise the variable with let but this produces more errors, how can i fix this?

Because const are block scoped, so etherval only exists inside the getBalance callback. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jan 10, 2022 at 22:52
I think the problem is in: const web3 = new Web3(new Web3.providers.HttpProvider('https://****)); You are missing a '. I should read const web3 = new Web3(new Web3.providers.HttpProvider('https://****')); — Ganesh Budhathoki
– Ganesh Budhathoki, Commented Jan 10, 2022 at 22:54
@GaneshBudhathoki this was my mistake when i removed the url from the example, i have fixed it, thanks — admin admin
– admin admin, Commented Jan 10, 2022 at 23:00
@Mike'Pomax'Kamermans thanks, can you post a working example? — admin admin
– admin admin, Commented Jan 10, 2022 at 23:01
don't use var, that's from an era of JS that we no longer live in. Use let for values that are going to change, or get assigned later, and use const for values that you immediately assign and then never change again. But even if you do that as properly as possible, that won't actually work because your return statement will happen well before you get that value. That etherval is state data, and you should be using the useState hook for it. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jan 10, 2022 at 23:47

Deniz Karadağ · Accepted Answer · 2022-01-10 23:55:41Z

1

import React, {useState} from 'react';
import Web3 from 'web3'

export default function Balances() {

const [balance, setBalance] = useState(0)
const web3 = new Web3(new Web3.providers.HttpProvider('https://****'));
web3.eth.getBalance("0x****", function(err1, balance) {
{
    console.log(web3.utils.fromWei(balance, "ether") + " ETH")
    setBalance(web3.utils.fromWei(balance, "ether"));
  }
})

  return (
    <div className="details">
      <div className="container">
        <div className="row">
          <div className="col-md-12">
                      <h2>Balance: {balance}</h2>

          </div>
        </div>
      </div>
    </div>
  );
}

You can use useState hook and assign the value once you have it. If this version doesn't render the correct amount, you can use useEffect hook also

edited Jan 10, 2022 at 23:55

answered Jan 10, 2022 at 23:43

Deniz Karadağ

7614 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

admin admin Over a year ago

for this i get error: Line 7:31: React Hook "useState" is called in function "balances" 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 Line 12:5: 'setBalance' is not defined no-undef

admin admin Over a year ago

i changed component to capital letter but still get this error: Line 12:5: 'setBalance' is not defined no-undef

Deniz Karadağ Over a year ago

I made a typo sorry. when I declared the state on top, it should be like this : const [balance, setBalance] = useState(0). I also edited it now

sissonb Over a year ago

is there an extra block inside the function passed to getBalance?

admin admin Over a year ago

hmm still same error: Line 12:5: 'setBalance' is not defined no-undef

|

Yilmaz · Accepted Answer · 2022-01-11 00:27:18Z

0

get the balance in useEffect and set it in state:

import { useEffect,useState } from "react";


const [balance, setBallance] = useState(null)

useEffect(() => {
    const loadBalance = async () => {
      // make sure web3 is properly
      const web3 = new Web3(new Web3.providers.HttpProvider('https://****'));
      const balance = await web3.eth.getBalance(addressHere)
      setBallance(web3.utils.fromWei(balance, "ether"))
    }

    loadBalance()
  }, [])

edited Jan 11, 2022 at 0:27

answered Jan 10, 2022 at 23:21

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

5 Comments

admin admin Over a year ago

thanks but can you show how to put this in my example?

Ganesh Budhathoki Over a year ago

this works too!! :D he is already doing it just enclose in useEffect

Yilmaz Over a year ago

@GaneshBudhathoki No way :)

Ganesh Budhathoki Over a year ago

@Yilmaz by he I was referring to you but okay.

Yilmaz Over a year ago

@GaneshBudhathoki I know. i was joking :)

Collectives™ on Stack Overflow

why is my variable undefined in reactjs with web3

2 Answers 2

8 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related