Can async functions be called in onClick in button react

Question

I am going to call async function in onclick event in button. But it is not working. Is it possible to call the async function inside button onlick ?

Here is the code.

Filter button

const FilterButton = (props) => {

return (
    <div className="p-2 ">
        <button className="btn btn-secondary" onClick={props.fetchInvoices}>Filter</button>
    </div>
 );
};

fetchInvoices async function

fetchInvoices = async () => {
    const invoices = await getInvoices(this.currentState.params);
    this.props.store.dispatch(UpdateInvoices(invoices));
};

code to pass function to component

 <SearchField store = {this.props.store} fetchInvoices={this.fetchInvoices}/>

Answer 1

This is how I call my asyncs inside an onClick:

<Button onClick={async () => {await this.asyncFunc("Example");} }/>

async asyncFunc(text) {
    console.log(text);
}

Answer 2

Your async function:

const asyncFunc = async () => {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("I am a done promise!"), 3000)
    });

    let result = await promise

    alert(result);
}

Your button component call:

<button onClick={asyncFunc} >I am a button!</button>