Repository: strapi/strapi
File: packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx (TypeScript)

Code before:

            if (visibleFields.length === 0) {
              return null; // Skip rendering the entire grid row
            }
            return (
              <ResponsiveGridRoot gap={4} key={index}>
                {visibleFields.map(({ size, ...field }) => {
                  /**
                   * Layouts are built from schemas so they don't understand the complete
                   * schema tree, for components we append the parent name to the field name
                   * because this is the structure for the data & permissions also understand
                   * the nesting involved.
                   */
                  const completeFieldName = `${name}.${field.name}`;

                  const translatedLabel = formatMessage({
                    id: `content-manager.components.${attribute.component}.${field.name}`,
                    defaultMessage: field.label,
                  });

                  const clonedLabelAction = React.isValidElement(field.labelAction)
                    ? React.cloneElement(field.labelAction as React.ReactElement, {
                        name: completeFieldName,
                        attribute: field.attribute,
                      })
                    : field.labelAction;

                  return (
                    <ResponsiveGridItem
                      col={size}
                      key={completeFieldName}
                      s={12}
                      xs={12}
                      direction="column"
                      alignItems="stretch"
                    >
                      {children({
                        ...field,
                        label: translatedLabel,
                        name: completeFieldName,
                        labelAction: clonedLabelAction,
                        document: currentDocument,
                      })}
                    </ResponsiveGridItem>
                  );
                })}
              </ResponsiveGridRoot>
            );
          })}
        </Flex>
      </Box>

Review comment (suggestion):
cloneElement is not recommended: https://react.dev/reference/react/cloneElement

I wonder if a render prop could work here though

```ts
const labelAction =
  typeof field.labelAction === 'function'
    ? field.labelAction({
        name: completeFieldName,
        attribute: field.attribute,
      })
    : field.labelAction;
```

Code after:
              return null; // Skip rendering the entire grid row
            }
            return (
              <ResponsiveGridRoot gap={4} key={index}>
                {visibleFields.map(({ size, ...field }) => {
                  /**
                   * Layouts are built from schemas so they don't understand the complete
                   * schema tree, for components we append the parent name to the field name
                   * because this is the structure for the data & permissions also understand
                   * the nesting involved.
                   */
                  const completeFieldName = `${name}.${field.name}`;

                  const translatedLabel = formatMessage({
                    id: `content-manager.components.${attribute.component}.${field.name}`,
                    defaultMessage: field.label,
                  });

                  return (
                    <ResponsiveGridItem
                      col={size}
                      key={completeFieldName}
                      s={12}
                      xs={12}
                      direction="column"
                      alignItems="stretch"
                    >
                      {children({
                        ...field,
                        label: translatedLabel,
                        name: completeFieldName,
                        document: currentDocument,
                      })}
                    </ResponsiveGridItem>
                  );
                })}
              </ResponsiveGridRoot>
            );
          })}
        </Flex>
      </Box>
    </ComponentProvider>
  );
};

export { NonRepeatableComponent };
export type { NonRepeatableComponentProps };