decentralBank.methods.stakingBalance is not a function

hi Clarian, Im having a typing error it seems to be but dont know why, this is the error: Unhandled Rejection (TypeError): decentralBank.methods.stakingBalance is not a function. Please need some help:(

My Code is:

import React, {Component} from 'react' import './App.css' import Navbar from './Navbar'; import Web3 from 'web3'; import Tether from '../truffle_abis/Tether.json' import RWD from '../truffle_abis/RWD.json' import DecentralBank from '../truffle_abis/DecentralBank.json'

class App extends Component {

async UNSAFE_componentWillMount() {
    await this.loadWeb3()
    await this.loadBlockchainData()
}

async loadWeb3() {
    if(window.ethereum) {
        window.web3 = new Web3(window.ethereum)
        await window.ethereum.enable()
    } else if(window.web3) {
            window.web3 = new Web3(window.web3.currentProvider)
        } else {
            window.alert('No ethereum browser detected! Check out MetaMask!')
        }

}

async loadBlockchainData() { const web3 = window.web3 const account = await web3.eth.getAccounts() this.setState({account: account[0]}) const networkId = await web3.eth.net.getId()

// Load Tether contract
const tetherData = Tether.networks[networkId]
if(tetherData) {
    const tether = new web3.eth.Contract(Tether.abi, tetherData.address)
    this.setState({tether})
    let tetherBalance = await tether.methods.balanceOf(this.state.account).call()
    this.setState({tetherBalance: tetherBalance.toString() })
    console.log({balance: tetherBalance})
} else {
    window.alert('Error! Tether contract not deployed to detect nertwork!')
}

    // Load RWD contract
    const rwdData = RWD.networks[networkId]
    if(rwdData) {
        const rwd = new web3.eth.Contract(RWD.abi, rwdData.address)
        this.setState({rwd})
        let rwdBalance = await rwd.methods.balanceOf(this.state.account).call()
        this.setState({rwdBalance: rwdBalance.toString() })
        console.log({balance: rwdBalance})
    } else {
        window.alert('Reward Token not deployed top the network ')
    }

    // Load DecentralBank contract
    const decentralBankData = DecentralBank.networks[networkId]
    if(tetherData) {
        const decentralBank = new web3.eth.Contract(DecentralBank.abi, decentralBankData.address)
        this.setState({decentralBank})
    let stakingBalance = await decentralBank.methods.stakingBalance(this.state.account).call()
    this.setState({stakingBalance: stakingBalance.toString()})
    console.log({balance: stakingBalance})
    } else {
    window.alert('Decentral Bank not deployed to the network')
    }

} constructor(props) { super(props) this.state = { account: '0x0', tether: {}, rwd: {}, decentralBank: {}, tetherBalance: '0', rwdBalance: '0', stakingBalance: '0', loading: true } }

// Our React Code Goes In Here!
render() {
    return (
        <div>
            <Navbar account={this.state.account}/>
            <div className='text-center' style={{
            color:'red',
            fontSize: '30px'}}>
             <h1>Hello OctoHolders!</h1>
            </div>
        </div>
    )
}

}

export default App;

01Clarian / defi-staking-app-starter

decentralBank.methods.stakingBalance is not a function #7