filter out null children in buttongroup (#1281)

iTwin · May 15, 2023 · c533796 · c533796
1 parent 5cfd0bb
commit c533796
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/purple-beds-hammer.md b/.changeset/purple-beds-hammer.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed an issue in ButtonGroup where null/undefined children were also getting wrapped by empty `<div>`s.
diff --git a/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx b/packages/itwinui-react/src/core/ButtonGroup/ButtonGroup.tsx
@@ -74,7 +74,10 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
     } = props;
 
     const items = React.useMemo(
-      () => React.Children.map(children, (child) => <div>{child}</div>) ?? [],
+      () =>
+        React.Children.map(children, (child) =>
+          !!child ? <div>{child}</div> : undefined,
+        )?.filter(Boolean) ?? [],
       [children],
     );