Pass Additional Data/Props to MS Graph Component

Question

I am using the mgt-react library to interact with the MS Graph API in a React app. What I am trying to do is pass an additional piece of data to the Application component from the Dashboard.

Dashboard Sample Code:

function Dashboard(props: MgtTemplateProps) {
  const group = props.dataContext;
  const groupId = '%7B5a717ea1-f41a-415e-93ca-efcb845b2f99%7D';
  return (
    <div className="px-5">
      <Get resource={`groups/%7B${group.id}%7D`}>
        <GroupInfo template="default" />
      </Get>
      <div className="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 mt-5 ring-1 ring-slate-900/5 shadow-xl">
        <h3 className="top-0 text-slate-900 dark:text-white mb-5 text-base font-medium tracking-tight uppercase">
          Assigned Apps
        </h3>
        <Get resource="deviceAppManagement/mobileApps">
          <Applications template="value" />
        </Get>
      </div>
    </div>
  );
}

In the line <Applications template="value"> I would like to pass the groupId through to that component. The standard way of passing props doesn't seem to work with this library.

The Applications component has this code:

function Applications(props: MgtTemplateProps) {
  const apps = props.dataContext;
  return (
    <p className="text-slate-500 dark:text-slate-400 text-sm">{apps.displayName}</p>
  );
}

Answer 1

Anyone else looking for a solution, I found one.

Updated Dashboard:

function Dashboard(props: MgtTemplateProps) {
  const group = props.dataContext;
  return (
    <div className="px-5">
      <Get resource={`groups/%7B${group.id}%7D`}>
        <GroupInfo template="default" />
      </Get>
      <div className="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 mt-5 ring-1 ring-slate-900/5 shadow-xl">
        <h3 className="top-0 text-slate-900 dark:text-white mb-5 text-base font-medium tracking-tight uppercase">
          Assigned Apps
        </h3>
        <Get resource="deviceAppManagement/mobileApps">
          <Applications template="value" testprop={group.id} />
        </Get>
      </div>
    </div>
  );
}

Updated Applications component to add the passed in prop and destructuring.

function Applications(props: MgtTemplateProps & { testprop: string }) {
  const { testprop, dataContext } = props;
  const apps = dataContext;
  console.log(testprop);
  return (
    <p className="text-slate-500 dark:text-slate-400 text-sm">
      {apps.displayName}
    </p>
  );
}