警告：React.js web 应用程序中的未知事件处理程序属性`onClick`

Question

This is the part of the code involved in the error.

const Balance = () => {
     async function onGetBalance() {
         const balance = await client.api.network.getBalance({ address: 'AcyLq3tokVpkMBMLALVMWRdVJ83TTgBUwU' });
         alert('onGetBalance: ' + JSON.stringify(balance));
              };
    
    return(
    <Button onClick={onGetBalance}></Button>
    )
    };
    export default Balance;

The getbalance function communicates with an API of an online banking app and alerts the account balance.

The original file is a Typescript file and it is this:

export const Network: React.SFC<RouterProps> = (props) => {

async function onGetBalance() {
    const balance = await client.api.network.getBalance({ address: 'AcyLq3tokVpkMBMLALVMWRdVJ83TTgBUwU' });
    alert('onGetBalance: ' + JSON.stringify(balance));
  }
return (
    <div>
      <button onClick={onGetNetwork}>getNetwork</button>
</div>
);
};

The original file works, I guess it depends on props . I tried with:

const Balance = (props) => {...

but it does not work. Unfortunately the only examples of how to use the API are in Typescript and I am having some difficulties and have not found other solutions by googling.

Answer 1

This code looks correct(same as TypeScript file) but try debugging or console the value of balance to check if you are getting any value if you aren't than your API code has some problem and check that code.

Answer 2

look at the button element in the code. onClick is spelt wrong and button should not start with a capital letter