import React, { useState} from 'react';
import Web3 from "web3";
import { GGTokenAbi } from "./GGTokenAbi.js";

import './App.css';

const web3 = new Web3(Web3.givenProvider);

const contractAddress = "0x79fB0E00F4dB8812b04Ae84816BbccAF941E5c90";
const GGTokenContract = new web3.eth.Contract(GGTokenAbi, contractAddress);

function App() {
console.log(contractAddress);
console.log(GGTokenContract);
console.log("hello");

return (

Button goes here

);
}

export default App;

This piece of react code logs all three console.logs just fine when I run the code. But then when I type console.log(contractAddress) in my Chrome JS console it throws `ReferenceError: contractAddress is not defined.

Is this because these constants are defined outside of the App() function?

Mar 24, 2020, 11:01 PM

I guess you should use REACT LIFE CYCLE METHOD , i.e, ComponentsDidMount and call the function that has the console logs within that lifecycle method

Because with this lifecycle method ..the first thing that will happen is if will create a web3 connection and then console all you want

Try it out @leendertsmulder Lennard

Mar 25, 2020, 6:47 AM

The typical console.log has no access to the inside of your App function. But you can either add breakpoint there to have the right context or add a debugger; line to have a breakpoint there

Mar 25, 2020, 7:05 AM