Help with displaying organisation units using dhis2 ui library's organisationUnitTree

[BernardMasache]

I am developing a custom web application that will make use of organization units, so i was trying to display them using DHIS2 UI Library organizationUnitTree but it renders an error of displayName undefined once i passed the roots orgs ids.
Thank you in advance.

[sami12111 (Sami Ullah)]

Hi @BernardMasache

Please follow below steps

1- First import OrganisationUnitTree
import { OrganisationUnitTree } from "@dhis2/ui";

2- Replace the id with your Org. Unit id

const orgUnits = [
  {
    id: "your id here",
    displayName: "Root Organization Unit Name here",
    // Other properties of the organization unit
  },
  // Other organization units
];

3- Then paste below code in react functional component

<OrganisationUnitTree
      name="Root org unit"
      onChange={(selectedOrgUnits) => console.log(selectedOrgUnits)}
      roots={["Paste top level org. unit id here"]}
      singleSelection={false}
      hideCheckboxes={false}
      hideMemberCount={false}
      onSelectClick={(orgUnit) => console.log(orgUnit)} 
    />

Thanks

[BernardMasache]

The error still exist. Attached are the screenshots

[BernardMasache]

Resolved. I just removed the CustomDataProvider.
Thank you