fix for nested x-display-format

react-openapi/src/components/ResourceDetail.tsx

@@ -64,7 +64,19 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
           Back
         </Button>
         <Typography variant="h5" fontWeight={700} sx={{ flex: 1 }}>
-          {applyDisplayFormat(data, resource.displayFormat)}
+          {applyDisplayFormat(
+            Object.fromEntries(
+              resource.orderedFields.map((field) => {
+                const value = data[field.name];
+                if (field.fk && typeof value === "object" && value != null) {
+                  const target = allResources.find((r) => r.name === field.fk!.resource);
+                  if (target) return [field.name, applyDisplayFormat(value, target.displayFormat)];
+                }
+                return [field.name, value];
+              })
+            ),
+            resource.displayFormat
+          )}
         </Typography>
         {resource.operations.update && (
           <Button variant="contained" startIcon={<EditIcon />} onClick={() => navigate(`${basePath}/${resource.name}/${id}/edit`)}>