diff --git a/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx b/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx index bb593f936..9fac59d2f 100644 --- a/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx +++ b/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx @@ -94,11 +94,12 @@ export const ComponentJSXTree: FC = ({ component }) => { const { dependencies, devDependencies } = componentPackage || {}; const treeToItems = ( tree: JSXTree, - level: number, + level: number = 0, + parentIndex: number = 0, ): TreeItems | undefined => { return tree.length ? tree.map((item, index) => ({ - id: `${item.name}-${level}-${index}`, + id: `${item.name}-${level}-${parentIndex}-${index}`, label: ({ isExpanded }) => ( ), @@ -114,12 +115,12 @@ export const ComponentJSXTree: FC = ({ component }) => { ), expanded: level <= 1, items: item.children - ? treeToItems(item.children, level + 1) + ? treeToItems(item.children, level + 1, index) : undefined, })) : undefined; }; - const newRows = jsx ? treeToItems(jsx, 0) : undefined; + const newRows = jsx ? treeToItems(jsx) : undefined; dispatch({ type: ACTIONS.SET, data: { rows: newRows } }); updateStats(newRows); }, [component, componentPackage]); diff --git a/ui/components/src/Tree/Tree.tsx b/ui/components/src/Tree/Tree.tsx index 6d001ad44..1e62d6f9b 100644 --- a/ui/components/src/Tree/Tree.tsx +++ b/ui/components/src/Tree/Tree.tsx @@ -101,14 +101,14 @@ export const Tree: FC = ({ const isActiveItem = activeItem && activeItem.id === id; const isActiveParent = hasActiveChidlren(item, activeItem); - const expandIcon = itemItems && ( + const expandIcon = itemItems?.length ? ( {isExpanded ? iconExpanded : iconCollapsed} - ); + ) : null; const content = (