How To Fetch Office 365 Users Using Graph API In SharePoint SpFx.

import * as React from 'react'
// import styles from './GraphApi.module.scss';
import { IGraphApiProps } from './IGraphApiProps';


import { DetailsList, PrimaryButton } from 'office-ui-fabric-react';
// import { MSGraphClient } from '@microsoft/sp-http';
import { MSGraphClientV3 } from '@microsoft/sp-http';


export interface Iuser {
? displayName: string;
? mail: string;
}
export interface IUserState {
? userstate: Iuser[];
}
// public allusers: Iuser[] = [];
export default class GraphApi extends React.Component<IGraphApiProps, IUserState> {
? constructor(props: IGraphApiProps) {
? ? super(props);
? ? this.state = {
? ? ? userstate: []
? ? }
? }
? public allusers: Iuser[] = [];
? public Getusers = (): void => {
? ? 
? ? this.props.msGraphClientFactory.
? ? ? getClient('3').
? ? ? then((msGraphClient: MSGraphClientV3) => {
? ? ? ? msGraphClient.
? ? ? ? ? api("users").
? ? ? ? ? version("v1.0").
? ? ? ? ? select("displayName,mail").
? ? ? ? ? get((err:any, res:any) => {
? ? ? ? ? ? if (err) {
? ? ? ? ? ? ? console.log("error occurred",err);
? ? ? ? ? ? }
? ? ? ? ? ? res.value.map((result: any) => {
? ? ? ? ? ? ? this.allusers.push({
? ? ? ? ? ? ? ? displayName: result.displayName,
? ? ? ? ? ? ? ? mail: result.mail
? ? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? ? ? this.setState({userstate:this.allusers});


? ? ? ? ? });


? ? ? });


? };
? public render(): React.ReactElement<IGraphApiProps> {



? ? return (
? ? ? <div>
? ? ? ? <PrimaryButton text="Search Users" onClick={this.Getusers}></PrimaryButton>
<DetailsList items={this.state.userstate}>


</DetailsList>
? ? ? </div>
? ? );
? }
}

;