fix: ensure null values are removed from tabs (#2805)

* fix: preact is not rendering tabpanels

* checked nodes instead of props

* checked if array and otherwise return undefined

* updated based on commetns

Author: eljefe223

packages/fast-components-react-base/src/tabs/tabs.tsx

@@ -14,6 +14,7 @@ import React from "react";
 import { DisplayNamePrefix } from "../utilities";
 import Tab, { TabManagedClasses } from "./tab";
 import TabItem from "./tab-item";
+import { isNil } from "lodash-es";
 import TabPanel, { TabPanelManagedClasses } from "./tab-panel";
 import { TabsHandledProps, TabsItem, TabsProps, TabsUnhandledProps } from "./tabs.props";
 
@@ -411,7 +412,9 @@ class Tabs extends Foundation<TabsHandledProps, TabsUnhandledProps, TabsState> {
         children: React.ReactNode,
         slot: TabsSlot | string
     ): React.ReactNode {
-        const childBySlot: React.ReactNode = this.withSlot(slot, children);
+        const childBySlot: React.ReactNode = this.filterChildren(
+            this.withSlot(slot, children)
+        );
 
         return slot !== this.getSlot(TabsSlot.tabItem)
             ? childBySlot
@@ -423,6 +426,19 @@ class Tabs extends Foundation<TabsHandledProps, TabsUnhandledProps, TabsState> {
               );
     }
 
+    /**
+     * Need to filter out none truthy results for Preact.
+     * Can remove if below gets merged in.
+     * https://github.com/preactjs/preact-compat/pull/461
+     */
+    private filterChildren(nodes: React.ReactNode): React.ReactNode {
+        if (Array.isArray(nodes)) {
+            return nodes.filter(Boolean);
+        } else {
+            return nodes;
+        }
+    }
+
     /**
      * Return a tab item if it has a tab and tab panel
      */