bug fixed and version updated

Author: ritwickdey

example/src/components/SwitchCase.js

@@ -1,16 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Div } from 'react-jsx-templating';
 
 function SwitchCase() {
-  const test = 'c';
+  const [animal, setAnimal] = useState('');
   return (
     <div className="App">
-      <Div $switch={test}>
-        <div $case={'a'}>A</div>
-        <div $case={'b'}>B</div>
-        <Div $case={'c'}>C</Div>
-        <div $case={'d'}>D</div>
-        <div $default>Default</div>
+      <input
+        placeholder={'type `dog` or `cat`'}
+        value={animal}
+        onChange={e => setAnimal(e.target.value)}
+      />
+      <Div $if={animal} $else={() => <div>Please type!! </div>}>
+        <Div $switch={animal}>
+          <div $case={'dog'}>woof-woof 🐕</div>
+          <div $case={'cat'}>meows meows 🐈</div>
+          <div $default>Ops!! No Match! </div>
+        </Div>
       </Div>
     </div>
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-jsx-templating",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "React Jsx Templating, inspired by Angular :)",
   "author": "ritwickdey",
   "license": "MIT",

src/lib/withTemplating.js

@@ -43,6 +43,8 @@ function doSwitchCaseOperation(props, Component) {
 
   for (let i = 0; i < totalNoOfNode; i++) {
     const child = totalNoOfNode === 1 ? children : children[i];
+    if(!React.isValidElement(child)) continue;
+
     const { $case, $default } = child.props;
 
     if (isUndefined($case) && isUndefined($default)) {