Rendering array children when no conditional node is present

README.md

@@ -1,6 +1,6 @@
 # If-Then-Else
 
-The missing conditional renderer that the React team forgot to ship.
+The missing conditional renderer that the React team didn't ship.
 
 Write clean UI components that can be read as a visual JS function.
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/index.tsx

@@ -58,7 +58,7 @@ export const If = (props: IfProps) => {
   const mainCondition = resolveCondition(props);
 
   // Many children
-  if (Array.isArray(children)) {
+  if (Array.isArray(children) && hasConditionalChildren(children)) {
     for (const child of children) {
       // Match the Then/ElseIf/Else elements only
       if (child.type === Then) {
@@ -190,3 +190,17 @@ function resolveCondition(props: IfProps): boolean {
   }
   return !(props as any).not;
 }
+
+function hasConditionalChildren(children: ReactNode): boolean {
+  if (!Array.isArray(children)) {
+    return isConditionalChild(children as ReactElement);
+  }
+  for (const item of children) {
+    if (isConditionalChild(item)) return true;
+  }
+  return false;
+}
+
+function isConditionalChild(node: ReactElement) {
+  return node.type === Then || node.type === ElseIf || node.type === Else;
+}

test/main.test.tsx

@@ -131,22 +131,22 @@ describe('If component', () => {
 
   describe('Children array', () => {
     describe('Extraneous children', () => {
-      it('Should ignore extraneous children', () => {
+      it('Should render pure non-conditional children', () => {
         let actual = renderToString(
           <If condition={true}>
             <p>Hello</p>
             <p>World</p>
           </If>
         );
-        expect(actual).toEqual('');
+        expect(actual).toEqual('<p>Hello</p><p>World</p>');
 
         actual = renderToString(
           <If condition={true}>
             <p>Hello</p>
             World
           </If>
         );
-        expect(actual).toEqual('');
+        expect(actual).toEqual('<p>Hello</p>World');
 
         actual = renderToString(
           <If condition={true}>
@@ -157,10 +157,10 @@ describe('If component', () => {
             !
           </If>
         );
-        expect(actual).toEqual('');
+        expect(actual).toEqual('<ul><li>Hello</li><li>World</li></ul>!');
       });
 
-      it('Should render only recognized logic nodes', () => {
+      it('Should only render conditional nodes when one or more present', () => {
         // Then
         let actual = renderToString(
           <If condition={true}>