title: Type 'Promise<void>' is not assignable to type 'MouseEventHandler<HTMLButtonElement>
body: <p>I'm trying to build an spfx webpart that updates a list in the same context,
  the button triggers a function that get the the current user name from the context along with a date, builds a json and then stringifies it, then I build a graph request and put it on the line with an <code>onclick</code> event.</p>
  <p>I'm getting the error below:</p>
  <blockquote>
  <p>Type 'Promise' is not assignable to type
  'MouseEventHandler'.   Type 'Promise'
  provides no match for the signature '(event:
  MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;): void'.ts(2322)
  index.d.ts(1449, 9): The expected type comes from property 'onClick'
  which is declared here on type
  'DetailedHTMLProps&lt;ButtonHTMLAttributes</p>
  </blockquote>
  <p>SignatureWP.tsx:</p>
  <pre><code>import * as React from 'react';
  import * as strings from 'SignatureWpWebPartStrings';
  import styles from './SignatureWp.module.scss';
  import { ISignatureWpProps, ISignatureWpState, SharepointListItem} from './ISignatureWpProps';
  import { escape } from '@microsoft/sp-lodash-subset';
  import { Checkbox } from 'office-ui-fabric-react';
  import { ServiceKey, ServiceScope } from &quot;@microsoft/sp-core-library&quot;;
  import { PageContext } from &quot;@microsoft/sp-page-context&quot;;
  import * as moment from 'moment';
  import { WebPartContext } from &quot;@microsoft/sp-webpart-base&quot;;
  import { ClientMode } from &quot;./clientMode&quot;;
  import { AadHttpClient, MSGraphClient } from &quot;@microsoft/sp-http&quot;;
  import { HTTP_REQUEST_TYPE } from '@azure/msal-browser/dist/utils/BrowserConstants';
  import { PopupWindowPosition } from '@microsoft/sp-property-pane';
  
  export interface IGraphConsumerProps {
    clientMode: ClientMode;
    context: WebPartContext;
  }
  export default class SignatureWp extends React.Component&lt;ISignatureWpProps, ISignatureWpState&gt; {
    constructor(props: ISignatureWpProps)
    {
      super(props);
      this.state = {
        agree: false, 
      };
    }   
    public render(): React.ReactElement&lt;ISignatureWpProps&gt; {
      const checkboxHandler = () =&gt; {
        this.setState({agree:!(this.state.agree)});
      };
      const listItemBuilder  = async () : Promise&lt;string&gt;  =&gt; {
        const obj: string = JSON.stringify(
        {
          &quot;fields&quot;: {
            'Name': () : void =&gt; {
              this.props.context.msGraphClientFactory
              .getClient()
              .then((client: MSGraphClient): void =&gt; {
                client         
                  .api(&quot;/me&quot;)
                  .get((error, response: any, rawResponse?: any) =&gt;{ 
                    console.log(error);
                  });
              });
            },
            'Date': moment().format(&quot;dd/mm/yyyy&quot;)
          }
        });
        return obj;
      };
      const buttonHandler = async(obj: Promise&lt;string&gt;)  =&gt; {
        this.props.context.msGraphClientFactory
        .getClient()
        .then((client: MSGraphClient): void =&gt; {
          client         
            .api(&quot;/sites/siteid/lists/Signatures&quot;)
            .header('Content-Type','application/json')
            .version(&quot;v1.0&quot;)
            .post(obj, (err, res, success) =&gt; {
              if (err) {  
              console.log(err);                
              }                
              if (success) {
                console.log(&quot;success&quot;);
              }
            });
          });
  
      }
      return(
        &lt;div className = {styles.App}&gt;
          &lt;div className = {styles.container}&gt;
            &lt;label htmlFor=&quot;agree&quot;&gt;קראתי והבנתי את ההנחיות והמסמכים המצורפים, מאשר/ת קריאה&lt;/label&gt;
            &lt;input type = &quot;Checkbox&quot; id = &quot;agree&quot; onChange ={checkboxHandler}/&gt;
          &lt;/div&gt;
          &lt;button disabled={!this.state.agree} className={styles.btn} onClick={buttonHandler(listItemBuilder())}&gt;
            להמשך תהליך השדרוג באתר פרטנר
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>