How to add “connect button” to React Dapp?

On my UI i have a button tag

<button className="enableEthereumButton">Enable Ethereum</button>

And for my javascript im using the metamask code example

const ethereumButton = document.querySelector('.enableEthereumButton');

ethereumButton.addEventListener('click', () => {
  //Will Start the metamask extension
  ethereum.request({ method: 'eth_requestAccounts' });
});

How can i slap this onto my existing code? this here:

class App extends Component {

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

  async loadBlockchainData() {
    const web3 = window.web3
    const networkId = await web3.eth.net.getId()

    if(networkId!==4){
      window.alert('Please switch network to the Rinkeby and refresh the page')
    }

    const contract_abi = "abi goes here"
    const contract_address = '0x58d62c88981e798B97636d1D8C77e841f94E36CF' //rinkeby

    const contract = new web3.eth.Contract(contract_abi, contract_address);
    this.setState({ contract: contract })

    const accounts = await web3.eth.getAccounts()
    this.setState({ account: accounts[0] })

    const balance = await web3.eth.getBalance(this.state.account)
    this.setState({ balance: balance })

    const maxBet = await web3.eth.getBalance(contract_address)
    this.setState({ maxBet: maxBet })
  }

  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('Non-Ethereum browser detected. You should consider trying MetaMask!')
    }
  }

How can i implement above code snippet from metamask so my wallet connects once i hit the connect button?

<button className=”enableEthereumButton”>Enable Ethereum</button> And for my javascript im using the metamask code example

const ethereumButton = document.querySelector(‘.enableEthereumButton’); ethereumButton.addEventListener(‘click’, () => { […]

Click here to view full article