fix(Stack): filter children that should not be rendered (rsuite#2732)

* fix(Stack): remove empty child

* test(Stack): add empty child case

* fix(Stack): fix test case

* fix(Stack): fix children count

* test(Stack): change test assertion

src/Stack/Stack.tsx

@@ -57,7 +57,6 @@ const Stack = React.forwardRef((props: StackProps, ref: React.Ref<HTMLDivElement
   const classes = merge(className, withClassPrefix());
   const isSupportGridGap = isSupportFlexGap();
 
-  const count = React.Children.count(children);
   const gridGap = Array.isArray(spacing) ? spacing : [spacing, 0];
   const itemStyles: React.CSSProperties = {
     [rtl ? 'marginLeft' : 'marginRight']: gridGap[0],
@@ -73,12 +72,20 @@ const Stack = React.forwardRef((props: StackProps, ref: React.Ref<HTMLDivElement
     ...style
   };
 
+  /*
+   * toArray remove undefined, null and boolean
+   */
+  const filterChildren = React.Children.toArray(children);
+
+  const count = filterChildren.length;
+
   return (
     <Component {...rest} ref={ref} className={classes} style={styles}>
-      {React.Children.map(children as React.ReactElement[], (child, index) => {
+      {React.Children.map(filterChildren as React.ReactElement[], (child, index) => {
         const childNode =
           child.type !== StackItem ? (
             <StackItem
+              key={index}
               className={prefix('item')}
               style={!isSupportGridGap ? itemStyles : undefined}
             >

src/Stack/test/StackSpec.js

@@ -58,4 +58,18 @@ describe('Stack', () => {
     assert.equal(getByTestId('test').children.length, 3);
     assert.equal(getByTestId('test').children[1].textContent, '|');
   });
+
+  it('Should not render empty child', () => {
+    const { getByTestId } = render(
+      <Stack data-testid="test">
+        {0}
+        {null}
+        {false}
+        {''}
+        {[1, 2]}
+      </Stack>
+    );
+
+    expect(getByTestId('test').children).to.length(4);
+  });
 });