From 7cde0fd01e629efbcb2b573b7c7c3e3e59e7b2cb Mon Sep 17 00:00:00 2001 From: Yasa Akbulut Date: Wed, 19 Feb 2020 14:17:57 +0100 Subject: [PATCH] Fix nested NavItems Currently, a NavItem having more than one child will throw an error. This is due to the `children` property of `NavItem` being passed as the first argument to `React.cloneElement`, which expects a single element. The existing tests are only verifying the case where the `NavItem` has only one child. This commit maps over `children` and calls `React.cloneElement` on each of them. --- frontend/packages/shared/components/layout/NavItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/shared/components/layout/NavItem.js b/frontend/packages/shared/components/layout/NavItem.js index b6d47ab9f6..92656e57c2 100644 --- a/frontend/packages/shared/components/layout/NavItem.js +++ b/frontend/packages/shared/components/layout/NavItem.js @@ -100,7 +100,7 @@ class NavItem extends Component { // Automatically expand nested nav if one of the child elements is active const isChildActive = React.Children.toArray(children).some(c => NavItem.isActive(c.props.href, c.props.exact)); const isExpanded = expanded || isChildActive; - const selfAwareChildren = children && React.cloneElement(children, { child: true }); + const selfAwareChildren = children && React.Children.map(children, c => React.cloneElement(c, { child: true })); let iconElement;