fix(ui-side-nav-bar): fix crash on null/falsy children

Now we allow any valid React element.

To test:
Add null/undefined/falsy children to the SideNavBar

Fixes INSTUI-4496

Author: matyasf

packages/ui-side-nav-bar/src/SideNavBar/__new-tests__/SideNavBar.test.tsx

@@ -77,6 +77,29 @@ describe('<SideNavBar />', () => {
     expect(nav).toHaveTextContent('Minimize SideNavBar')
   })
 
+  it('should not crash with valid React elements', async () => {
+    render(
+      <SideNavBar
+        label="Main navigation"
+        toggleLabel={{
+          expandedLabel: 'Minimize SideNavBar',
+          minimizedLabel: 'Expand SideNavBar'
+        }}
+      >
+        {false}
+        <div>test123</div>
+        <SideNavBarItem
+          icon={<IconDashboardLine />}
+          label="Dashboard"
+          href="#"
+        />
+      </SideNavBar>
+    )
+    const navElements = screen.getAllByRole('listitem')
+    expect(navElements[0]).toHaveTextContent('test123')
+    expect(navElements[1]).toHaveTextContent('Dashboard')
+  })
+
   it('should render a single semantic nav element', async () => {
     render(
       <SideNavBar

packages/ui-side-nav-bar/src/SideNavBar/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 /** @jsx jsx */
-import React, { Component, Children, ReactElement } from 'react'
+import React, { Component, Children, ReactElement, isValidElement } from 'react'
 
 import { testable } from '@instructure/ui-testable'
 
@@ -47,7 +47,6 @@ const navMinimized = ({ minimized }: { minimized: boolean }) => ({
 category: components
 ---
 **/
-
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
 class SideNavBar extends Component<SideNavBarProps, SideNavBarState> {
@@ -107,6 +106,7 @@ class SideNavBar extends Component<SideNavBarProps, SideNavBarState> {
 
   renderChildren() {
     return Children.map(this.props.children, (child) => {
+      if (!isValidElement(child)) return null
       const navItem = safeCloneElement(child as ReactElement, {
         minimized: this.state.minimized
       })