From 25d2a8ffa1cd9448f1a610f54e5aa9cc6800d8a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?=
 <8087692+remidej@users.noreply.github.com>
Date: Fri, 5 Jan 2024 14:50:10 +0100
Subject: [PATCH] fix: display nested components in edit view (#19160)

* add nested component in getstarted dz

* fix: display nested components in edit view

* chore: add comment
---
 .../api/kitchensink/content-types/kitchensink/schema.json    | 2 +-
 .../admin/src/content-manager/components/FieldComponent.tsx  | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/getstarted/src/api/kitchensink/content-types/kitchensink/schema.json b/examples/getstarted/src/api/kitchensink/content-types/kitchensink/schema.json
index 86e97d6dd1..32933683cb 100644
--- a/examples/getstarted/src/api/kitchensink/content-types/kitchensink/schema.json
+++ b/examples/getstarted/src/api/kitchensink/content-types/kitchensink/schema.json
@@ -89,7 +89,7 @@
     },
     "dynamiczone": {
       "type": "dynamiczone",
-      "components": ["basic.simple", "blog.test-como"]
+      "components": ["basic.simple", "blog.test-como", "default.closingperiod"]
     },
     "one_way_tag": {
       "type": "relation",
diff --git a/packages/core/admin/admin/src/content-manager/components/FieldComponent.tsx b/packages/core/admin/admin/src/content-manager/components/FieldComponent.tsx
index 62112a144c..c3a4980c0f 100644
--- a/packages/core/admin/admin/src/content-manager/components/FieldComponent.tsx
+++ b/packages/core/admin/admin/src/content-manager/components/FieldComponent.tsx
@@ -7,7 +7,7 @@ import {
   useCMEditViewDataManager,
 } from '@strapi/helper-plugin';
 import { Trash } from '@strapi/icons';
-import size from 'lodash/size';
+import { get, size } from 'lodash/fp';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
@@ -67,7 +67,8 @@ const FieldComponent = ({
 
   const allowedFields = isCreatingEntry ? createActionAllowedFields : updateActionAllowedFields;
 
-  const componentValue = modifiedData[name] ?? null;
+  // Use lodash get since the name can be a nested path (e.g. "component.1.component")
+  const componentValue = get(name, modifiedData) ?? null;
   const compoName = getFieldName(name);
 
   const hasChildrenAllowedFields = React.useMemo(() => {