From c913f62b22ab55e0e2572921b772e32d1b8785e1 Mon Sep 17 00:00:00 2001
From: Victoria Zhizhonkova <indarklight@gmail.com>
Date: Wed, 24 Jan 2024 23:43:02 +0700
Subject: [PATCH] fix(SubnavigationBar): ignore falsy children (#6442)

* fix(SubnavigationBar): ignore falsy children

* Fix review notes
---
 .../SubnavigationBar.test.tsx                 | 19 +++++++++++++++++++
 .../SubnavigationBar/SubnavigationBar.tsx     | 13 ++++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.test.tsx b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.test.tsx
index 396d89b9e7..c746c7a162 100644
--- a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.test.tsx
+++ b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.test.tsx
@@ -1,6 +1,25 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
 import { baselineComponent } from '../../testing/utils';
+import { SubnavigationButton } from '../SubnavigationButton/SubnavigationButton';
 import { SubnavigationBar } from './SubnavigationBar';
 
 describe('SubnavigationBar', () => {
   baselineComponent(SubnavigationBar);
+
+  it('Does not render falsy children', () => {
+    const falseCondition = false;
+    const trueCondition = true;
+    render(
+      <SubnavigationBar mode="fixed">
+        <SubnavigationButton>Сканировать</SubnavigationButton>
+        {null}
+        {trueCondition && <SubnavigationButton>Добавить</SubnavigationButton>}
+        {false}
+        {falseCondition && <SubnavigationButton>Удалить</SubnavigationButton>}
+      </SubnavigationBar>,
+    );
+
+    expect(screen.getAllByRole('listitem').length).toEqual(2);
+  });
 });
diff --git a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
index ae63071ae5..c8b2dff5f0 100644
--- a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
+++ b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { hasReactNode } from '@vkontakte/vkjs';
 import { HTMLAttributesWithRootRef } from '../../types';
 import {
   HorizontalScroll,
@@ -55,11 +56,13 @@ export const SubnavigationBar = ({
     >
       <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>
         <ul className={styles['SubnavigationBar__scrollIn']}>
-          {React.Children.map(children, (child, idx) => (
-            <li key={idx} className={styles['SubnavigationBar__item']}>
-              {child}
-            </li>
-          ))}
+          {React.Children.map(children, (child, idx) =>
+            hasReactNode(child) ? (
+              <li key={idx} className={styles['SubnavigationBar__item']}>
+                {child}
+              </li>
+            ) : null,
+          )}
         </ul>
       </ScrollWrapper>
     </RootComponent>