Cannot read properties of undefined (reading 'on') to connect metamask in React-CodePudding

I am trying to connect the metamask wallet into my project but there is no metamask extention whe website give error: Uncaught TypeError: Cannot read properties of undefined (reading 'on'). So I am doing basic if else command which is:

const connectWalletHandler = () => {
    if (window.ethereum) {
      return true;
    } else {
      return false;
    }
  }

And in render:

{connectWalletHandler ? <Wallet /> : <div>Metamask extention is needed</div>}

But still I get the same error. So how can I control the wallet?

CodePudding user response：

Replace {connectWalletHandler ? ...} into {connectWalletHandler() ? ...}