How to use @microsoft/fast-data-utilities-react - 10 common examples

"",
                        reactChildrenStringSchema,
                        data
                    )
                );
            }
        } else {
            const isRoot: boolean = isRootLocation(lastComponentDataLocation);
            const rootLocationOfComponent: string = isRoot
                ? ""
                : lastComponentDataLocation.replace(dataLocationItem, "");
            const dataLocationFromLastComponent: string = getCurrentComponentDataLocation(
                dataLocationItem,
                lastComponentDataLocation
            );
            let currentSchemaLocation: string = mapSchemaLocationFromDataLocation(
                isRoot ? dataLocationItem : dataLocationFromLastComponent,
                isRoot ? data : get(data, rootLocationOfComponent),
                currentComponentSchema
            );
            const currentSchemaLocationSegments: string[] = currentSchemaLocation.split(
                "."
            );
            const currentSchemaLocationSegmentsLength: number =
                currentSchemaLocationSegments.length;
            if (
                !isNaN(
                    parseInt(
                        currentSchemaLocationSegments[
                            currentSchemaLocationSegmentsLength - 1
                        ],
                        10

export function getNavigation(
    dataLocation: string,
    data: any,
    schema: any,
    childOptions: FormChildOptionItem[]
): NavigationItem[] {
    const allChildOptions: FormChildOptionItem[] = getReactDefaultChildren().concat(
        childOptions
    );
    const dataLocationsOfChildren: string[] = getDataLocationsOfChildren(
        schema,
        data,
        allChildOptions
    );
    const normalizedDataLocation: string = !dataLocationsOfChildren.includes(dataLocation)
        ? normalizeDataLocation(dataLocation, data)
        : typeof get(data, dataLocation) === "string"
            ? normalizeDataLocation(dataLocation, data)
            : `${normalizeDataLocation(dataLocation, data)}.${propsKeyword}`;
    const dataLocations: Set = new Set(
        [""].concat(getLocationsFromSegments(normalizedDataLocation.split(".")))
    );
    const navigationItems: NavigationItem[] = [];
    let currentComponentSchema: any = schema;
    let lastComponentDataLocation: string = "";

data: any,
    schema: any,
    childOptions: FormChildOptionItem[]
): NavigationItem[] {
    const allChildOptions: FormChildOptionItem[] = getReactDefaultChildren().concat(
        childOptions
    );
    const dataLocationsOfChildren: string[] = getDataLocationsOfChildren(
        schema,
        data,
        allChildOptions
    );
    const normalizedDataLocation: string = !dataLocationsOfChildren.includes(dataLocation)
        ? normalizeDataLocation(dataLocation, data)
        : typeof get(data, dataLocation) === "string"
            ? normalizeDataLocation(dataLocation, data)
            : `${normalizeDataLocation(dataLocation, data)}.${propsKeyword}`;
    const dataLocations: Set = new Set(
        [""].concat(getLocationsFromSegments(normalizedDataLocation.split(".")))
    );
    const navigationItems: NavigationItem[] = [];
    let currentComponentSchema: any = schema;
    let lastComponentDataLocation: string = "";

    dataLocations.forEach((dataLocationItem: string) => {
        if (dataLocationsOfChildren.includes(dataLocationItem)) {
            const isChildString: boolean =
                typeof get(data, dataLocationItem) === "string";
            currentComponentSchema = getSchemaByDataLocation(
                schema,
                data,
                dataLocationItem,

schema: any,
    childOptions: FormChildOptionItem[]
): NavigationItem[] {
    const allChildOptions: FormChildOptionItem[] = getReactDefaultChildren().concat(
        childOptions
    );
    const dataLocationsOfChildren: string[] = getDataLocationsOfChildren(
        schema,
        data,
        allChildOptions
    );
    const normalizedDataLocation: string = !dataLocationsOfChildren.includes(dataLocation)
        ? normalizeDataLocation(dataLocation, data)
        : typeof get(data, dataLocation) === "string"
            ? normalizeDataLocation(dataLocation, data)
            : `${normalizeDataLocation(dataLocation, data)}.${propsKeyword}`;
    const dataLocations: Set = new Set(
        [""].concat(getLocationsFromSegments(normalizedDataLocation.split(".")))
    );
    const navigationItems: NavigationItem[] = [];
    let currentComponentSchema: any = schema;
    let lastComponentDataLocation: string = "";

    dataLocations.forEach((dataLocationItem: string) => {
        if (dataLocationsOfChildren.includes(dataLocationItem)) {
            const isChildString: boolean =
                typeof get(data, dataLocationItem) === "string";
            currentComponentSchema = getSchemaByDataLocation(
                schema,
                data,
                dataLocationItem,
                allChildOptions

private generateChildOptionText(item: any): string {
        const childOption: FormChildOptionItem = getChildOptionBySchemaId(
            item.id,
            this.childOptions
        );

        if (typeof childOption === "object" && childOption !== null) {
            return childOption.name;
        } else {
            return this.getChildOptionTextString(item);
        }
    }

export function getComponentByDataLocation(
    id: string,
    childOptions: FormChildOptionItem[]
): any {
    const childOption: FormChildOptionItem = getChildOptionBySchemaId(id, childOptions);

    return childOption ? childOption.component : null;
}

export function getNavigationItem(
    dataLocation: string,
    schemaLocation: string,
    schema: any,
    data: any
): NavigationItem {
    return {
        dataLocation,
        schemaLocation,
        title: schema.title || "Untitled",
        data: getPartialData(dataLocation, data),
        schema,
    };
}

private renderSection(): React.ReactNode {
        return (
            
        );

export function getNavigationFromData(
    data: any,
    schema: any,
    childOptions: ChildOptionItem[]
): TreeNavigation {
    const childrenDataLocations: string[] = getDataLocationsOfChildren(
        schema,
        data,
        childOptions
    );

    const navigation: TreeNavigation[] = getNavigationFromChildLocations(
        [],
        childrenDataLocations,
        data,
        childOptions
    );

    return {
        text: schema.title ? schema.title : "Undefined",
        dataLocation: "",
        items: navigation,

(componentDataItem: ComponentData, index: number) => {
                const mappedComponent: any = this.props.components.find(
                    (component: ChildOptionItem) => {
                        return componentDataItem.id === component.schema.id;
                    }
                );

                return (
                    
                );
            }
        );