Flatten children with React.Children.toArray upfront

src/__snapshots__/index.test.js.snap

@@ -483,6 +483,91 @@ Object {
 }
 `;
 
+exports[`Step Wizard Component renders a single child without issues 1`] = `
+<div
+  className={null}
+>
+  <div
+    className="step-wrapper"
+  >
+    <div
+      className="step  active"
+    >
+      <div>
+        Step 1
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Step Wizard Component renders a single child without issues 2`] = `
+Object {
+  "activeStep": 0,
+  "classes": Object {},
+  "hashKeys": Object {
+    "0": "step1",
+    "step1": 0,
+  },
+}
+`;
+
+exports[`Step Wizard Component renders dynamic trees from mapped collections 1`] = `
+<div
+  className={null}
+>
+  <div
+    className="step-wrapper"
+  >
+    <div
+      className="step  active"
+    >
+      <div>
+        1
+      </div>
+    </div>
+    <div
+      className="step"
+    >
+      <div>
+        2
+      </div>
+    </div>
+    <div
+      className="step"
+    >
+      <div>
+        3
+      </div>
+    </div>
+    <div
+      className="step"
+    >
+      <div>
+        4
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Step Wizard Component renders dynamic trees from mapped collections 2`] = `
+Object {
+  "activeStep": 0,
+  "classes": Object {},
+  "hashKeys": Object {
+    "0": "step1",
+    "1": "step2",
+    "2": "step3",
+    "3": "step4",
+    "step1": 0,
+    "step2": 1,
+    "step3": 2,
+    "step4": 3,
+  },
+}
+`;
+
 exports[`Step Wizard Component with 3 basic components 1`] = `
 <div
   className={null}
@@ -599,6 +684,35 @@ Object {
 }
 `;
 
+exports[`Step Wizard Functions null elements are pruned away 1`] = `
+Object {
+  "activeStep": 0,
+  "classes": Object {},
+  "hashKeys": Object {
+    "0": "step1",
+    "1": "step2",
+    "step1": 0,
+    "step2": 1,
+  },
+}
+`;
+
+exports[`Step Wizard Functions null elements are pruned away 2`] = `
+Object {
+  "activeStep": 1,
+  "classes": Object {
+    "0": "animated fadeOutLeft",
+    "1": "animated fadeInRight",
+  },
+  "hashKeys": Object {
+    "0": "step1",
+    "1": "step2",
+    "step1": 0,
+    "step2": 1,
+  },
+}
+`;
+
 exports[`Step Wizard Functions onStepChange 1`] = `
 Object {
   "activeStep": 0,

src/index.d.ts

@@ -23,7 +23,7 @@ export type StepWizardProps = Partial<{
     exitLeft?: string
   }
 
-  children: JSX.Element[]
+  children: JSX.Element | JSX.Element[]
 }>
 
 export type StepWizardChildProps<T extends Record<string, any> = {}> = {

src/index.js

@@ -39,7 +39,7 @@ export default class StepWizard extends PureComponent {
         // Set initial classes
         // Get hash only in client side
         const hash = typeof window === 'object' ? this.getHash() : '';
-        const children = React.Children.toArray(this.getSteps());
+        const children = this.getSteps();
         children.forEach((child, i) => {
             // Create hashKey map
             state.hashKeys[i] = (child.props && child.props.hashKey) || `step${i + 1}`;
@@ -136,7 +136,7 @@ export default class StepWizard extends PureComponent {
         return this.getSteps().length;
     }
 
-    getSteps = () => this.props.children.filter(el => el);
+    getSteps = () => React.Children.toArray(this.props.children);
 
     /** Go to first step */
     firstStep = () => this.goToStep(1)

src/index.test.js

@@ -27,7 +27,7 @@ const testComponent = (component) => {
     const state = getState(component);
     takeSnapshot(state);
 
-    return state;
+    return { instance: getInstance(component), state };
 };
 const basicComponent = () => (
     getInstance((
@@ -146,6 +146,24 @@ describe('Step Wizard Component', () => {
             </StepWizard>));
     });
 
+    it('renders a single child without issues', () => {
+        testComponent((
+            <StepWizard>
+                <Step1 />
+            </StepWizard>
+        ));
+    });
+
+    it('renders dynamic trees from mapped collections', () => {
+        const data = [1, 2, 3, 4];
+        const { instance } = testComponent((
+            <StepWizard>
+                {data.map((i) => <div key={i}>{i}</div>)}
+            </StepWizard>
+        ));
+        expect(instance.totalSteps).toBe(data.length);
+    });
+
     it('garbage props', () => {
         console.error.mockClear();
 
@@ -170,6 +188,29 @@ describe('Step Wizard Component', () => {
 });
 
 describe('Step Wizard Functions', () => {
+    it('null elements are pruned away', () => {
+        const wrapper = getInstance((
+            <StepWizard>
+                {null}
+                <Step1 />
+                {null}
+                <Step2 />
+                {null}
+            </StepWizard>
+        ));
+        // only non-null children are kept, i.e. 1. Step1 and 2. Step2
+        expect(wrapper.totalSteps).toEqual(2);
+        // first child is null, thus it should've been pruned and we should be at <Step1 />
+        expect(wrapper.state.activeStep).toEqual(0);
+        takeSnapshot(wrapper.state);
+        // null children in-between <Step1> and <Step2 /> should have been pruned
+        wrapper.nextStep();
+        expect(wrapper.state.activeStep).toEqual(1);
+        // last children is null, so it should have been pruned; therefore we stay at <Step 2 />
+        wrapper.lastStep();
+        expect(wrapper.state.activeStep).toEqual(1);
+        takeSnapshot(wrapper.state);
+    });
     it('lastStep', () => {
         const wrapper = basicComponent();
         wrapper.lastStep();