How to use a getter function inside a React component?

Question

I am trying to make a basic React component to retrieve a value from a deployed contract. In this example, I am using an input box to receive a contract address (which is a deployed address of an ERC20 token on localhost) and populates the addr state variable of the Balance component.

When the Get Balance Button is clicked, the contract's max_supply should be retrieved and the balance state variable should be updated with that value.

I am able to deploy the ERC20 token contract. However, I am unable to retrieve the value of the s_maxSupply() getter from within my Balance component. Is this even possible? If not, any alternatives would be much appreciated. Thank you in advance.

import { useState } from 'react';
import { ethers } from 'ethers';
import OilToken from '../artifacts/contracts/OilToken.sol/OilToken.json'


const Balance = () => {
    const [addr, setAddr] = useState('---');
    const [balance, setBalance] = useState(0);
    let _balance = 0;

    async function getBalanceFromContract() {

        if (typeof window.ethereum !== 'undefined') {
            const [account] = await window.ethereum.request({ method: 'eth_requestAccounts' })
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const contract = new ethers.Contract(addr, OilToken.abi, provider)
            _balance = contract.s_maxSupply();
        }
    }

    function _setBalance() {
        getBalanceFromContract();
        setBalance(_balance);
    }

    return (
        <div>
            <br />
            <input onChange={e => setAddr(e.target.value)} placeholder="Enter account address" value={addr} />
            <button onClick={_setBalance}>Get Balance</button>
            <br />
            <div>The Max Supply of tokens is: {balance}</div>
        </div>
    );
}

export default Balance

The ERC20 token is provided below for completeness.

pragma solidity ^0.8.6;

import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Votes.sol";

contract OilToken is ERC20Votes {
    uint256 public s_maxSupply = 1000 * 10**18;

    mapping 

    constructor() ERC20("OilToken", "OIL") ERC20Permit("GovernanceToken") {
        _mint(msg.sender, s_maxSupply);
    }


 
    function _afterTokenTransfer(
        address from,
        address to,
        uint256 amount
    ) internal override(ERC20Votes) {
        super._afterTokenTransfer(from, to, amount);
    }

    function _mint(address to, uint256 amount) internal override(ERC20Votes) {
        super._mint(to, amount);
    }

    function _burn(address account, uint256 amount)
        internal
        override(ERC20Votes)
    {
        super._burn(account, amount);
    }
}

Answer 1

contract.s_maxSupply() will return promise so you need to write it like this

_balance = await contract.s_maxSupply();