Microsoft Graph Toolkit - How to loop through Get component result using React and default template

Question

Using the default template in the Get component, the whole result is returned. When using React Graph Toolkit components, how can I loop through this result set in the template created, and create f.ex. Person components for each result item?

Answer 1

If you're fetching /user resource and the result is an array, then the value template will be more suitale:

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

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

<Get resource="/users" scopes={["User.Read.All"]}>
    <MemberPerson template="value" />
    <LoadingPerson template="loading" />
</Get>

More reference:

• https://learn.microsoft.com/en-us/graph/toolkit/get-started/mgt-react