Type 'Promise' is not assignable to type 'MouseEventHandler

Question

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 onclick event.

I'm getting the error below:

Type 'Promise' is not assignable to type 'MouseEventHandler'. Type 'Promise' provides no match for the signature '(event: MouseEvent<HTMLButtonElement, MouseEvent>): void'.ts(2322) index.d.ts(1449, 9): The expected type comes from property 'onClick' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes

SignatureWP.tsx:

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 "@microsoft/sp-core-library";
import { PageContext } from "@microsoft/sp-page-context";
import * as moment from 'moment';
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { ClientMode } from "./clientMode";
import { AadHttpClient, MSGraphClient } from "@microsoft/sp-http";
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<ISignatureWpProps, ISignatureWpState> {
  constructor(props: ISignatureWpProps)
  {
    super(props);
    this.state = {
      agree: false, 
    };
  }   
  public render(): React.ReactElement<ISignatureWpProps> {
    const checkboxHandler = () => {
      this.setState({agree:!(this.state.agree)});
    };
    const listItemBuilder  = async () : Promise<string>  => {
      const obj: string = JSON.stringify(
      {
        "fields": {
          'Name': () : void => {
            this.props.context.msGraphClientFactory
            .getClient()
            .then((client: MSGraphClient): void => {
              client         
                .api("/me")
                .get((error, response: any, rawResponse?: any) =>{ 
                  console.log(error);
                });
            });
          },
          'Date': moment().format("dd/mm/yyyy")
        }
      });
      return obj;
    };
    const buttonHandler = async(obj: Promise<string>)  => {
      this.props.context.msGraphClientFactory
      .getClient()
      .then((client: MSGraphClient): void => {
        client         
          .api("/sites/siteid/lists/Signatures")
          .header('Content-Type','application/json')
          .version("v1.0")
          .post(obj, (err, res, success) => {
            if (err) {  
            console.log(err);                
            }                
            if (success) {
              console.log("success");
            }
          });
        });

    }
    return(
      <div className = {styles.App}>
        <div className = {styles.container}>
          <label htmlFor="agree">קראתי והבנתי את ההנחיות והמסמכים המצורפים, מאשר/ת קריאה</label>
          <input type = "Checkbox" id = "agree" onChange ={checkboxHandler}/>
        </div>
        <button disabled={!this.state.agree} className={styles.btn} onClick={buttonHandler(listItemBuilder())}>
          להמשך תהליך השדרוג באתר פרטנר
        </button>
      </div>
    );
  }
}

`onClick={buttonHandler(listItemBuilder())}` this will call the buttonHandler during render and which returns a promise. You would want to write `onClick={() => buttonHandler(listItemBuilder())}` — Martin, May 03 '21 at 11:12

YEONGHUN KO · Answer 1 · 2022-10-01T07:36:54.843

6

First of all,you have to pass function itself instead of called function.

I solved this error by typing "event" as "any" just for now

onClick={(e:any) => buttonHandler(listItemBuilder())}

Hope this would do the job!

edited Oct 01 '22 at 07:36

answered Oct 01 '22 at 07:35

YEONGHUN KO

61
1
3

Type 'Promise' is not assignable to type 'MouseEventHandler

1 Answers1