reactjs - Working example for Graph Toolkit using SharePoint spfx, React and Get component with template

Question

I'm trying to make use of the Microsoft Graph Toolkit inside my SharePoint spfx web part solution, and more specifically the React version (@microsoft/mgt-react).

I've managed importing the packages, and also render the control correctly.

However I am now trying to render controls based on the result from a control. Something like this:

const MyPerson = (props: MgtTemplateProps) => {
      const { person } = props.dataContext;
      return <Person userId={person.userPrincipalName}></Person>;
    }

And here is the control:

      <Get resource={`/groups/${this.props.groupid}/members`}>
        <MyPerson template="value" />
      </Get>

Nothing is rendered out. Could someone help me out fixing this?

Thanks!

UPDATED WORKING SAMPLE:

  public render(): React.ReactElement<IMemberListProps> {

const LoadingPerson = (props: MgtTemplateProps) => {
      return <div><Spinner size={SpinnerSize.large} label="Loading members..." /></div>;
    };

const MemberPerson = (props: MgtTemplateProps) => {
      const person = props.dataContext;
        return <div className={styles.memberRow}>
          <Person userId={person.userPrincipalName} view={PersonViewType.twolines} fetchImage={true} showPresence={true}
            personCardInteraction={PersonCardInteraction.hover} line2Property="mail"></Person></div>;
    };

    return (
      <div>
        <Get resource={`/groups/${this.props.groupId.toString()}/members/microsoft.graph.user/?$count=true&$orderby=displayname`} >
          <MemberPerson template="value" />
          <LoadingPerson template="loading" />
        </Get>
      </div>
    );
}

Answer 1

The props.dataContext doesn't have a person property but is the person object itself, try changing your MyPerson definition to:

const MyPerson = (props: MgtTemplateProps) => {
  const person = props.dataContext;
  return <Person userId={person.userPrincipalName}></Person>;
}