* Modify createElement function

nparashar150 · Oct 5, 2022 · 9d738bc · 9d738bc
1 parent a36928f
commit 9d738bc
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 50 deletions.
diff --git a/babel/babel.js b/babel/babel.js
@@ -8,7 +8,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var App = function App() {
   return _index["default"].createElement("div", {
     id: "root2"
-  }, _index["default"].createElement("h1", null, "My First Own React App"), _index["default"].createElement("p", null, "Lets see how it works"));
+  }, _index["default"].createElement("h1", null, "My First Own React App"), _index["default"].createElement("p", null, _index["default"].createElement("div", {
+    className: "testing"
+  }, _index["default"].createElement("h1", null, "My First Own React App"), _index["default"].createElement("p", null, "This is another nesting level"))));
 };
 
 _index["default"].render(App(), "root");

diff --git a/lib/createElement.js b/lib/createElement.js
@@ -7,68 +7,41 @@ import { styleToString } from "./utils/styleToString";
  * @param {object} state
  * @returns {HTMLElement}
  */
-export const createElement = (
-  element,
-  props = {},
-  state = {},
-  children = [],
-  parentElement = null,
-) => {
+export const createElement = (element, props = {}, ...children) => {
   // create a new element
   const _htmlElement = document?.createElement(element);
-
   // add the props to the element
-  if (typeof props === "object" && Object.keys(props).length > 0) {
+  if (props && typeof props === "object" && Object.keys(props).length > 0) {
     Object.keys(props)?.map((propName) => {
       if (propName.includes("on")) {
         // if prop is of event type then add event listener
         _htmlElement.addEventListener(propName.slice(2), props[propName]);
-      }
-      if (propName.toLowerCase() === "classname" || propName === "class") {
+      } else if (propName.toLowerCase() === "classname") {
         // if prop is className
         _htmlElement.setAttribute("class", props[propName]);
-      }
-      if (propName.toLowerCase() === "style") {
+      } else if (propName.toLowerCase() === "style") {
         // if prop is style
         _htmlElement.setAttribute("style", styleToString(props[propName]));
+      } else {
+        // rest other propNames
+        _htmlElement?.setAttribute(propName, props[propName]);
       }
-      // rest other propNames
-      _htmlElement?.setAttribute(propName, props[propName]);
     });
   }
 
-  // store the state in the element
-  if (typeof state === "object" && Object.keys(state).length > 0) {
-    _htmlElement.state = {};
-    _htmlElement.state = {
-      ...state,
-    };
-  }
-  // append child to parent element if parent element is passed as _htmlElement
-  if (parentElement && parentElement instanceof HTMLElement) {
-    parentElement.appendChild(_htmlElement);
-  }
-
-  // add the children to the element
-  if (
-    (typeof children === "string") |
-    (typeof children === "number") |
-    (typeof children === "boolean") |
-    (typeof children === "undefined") |
-    (children === null)
-  ) {
-    _htmlElement.innerHTML = children;
-  } else {
-    children?.map((child) => {
-      createElement({
-        element: child?.element,
-        props: child?.props,
-        state: child?.state,
-        children: child?.children,
-        parentElement: _htmlElement,
-      });
-    });
-  }
+  children?.map((child) => {
+    if (
+      (typeof child === "string") |
+      (typeof child === "number") |
+      (typeof child === "boolean") |
+      (typeof child === "undefined") |
+      (child === null)
+    ) {
+      _htmlElement.innerHTML = child;
+    } else {
+      _htmlElement.appendChild(child);
+    }
+  });
 
   // return the most top-level element
   return _htmlElement;

diff --git a/src/index.js b/src/index.js
@@ -4,9 +4,13 @@ import OwnReact from "../lib/index";
 const App = () => {
   return (
     <div id="root2">
-      {/* <Button /> */}
       <h1>My First Own React App</h1>
-      <p>Lets see how it works</p>
+      <p>
+        <div className="testing">
+          <h1>My First Own React App</h1>
+          <p>This is another nesting level</p>
+        </div>
+      </p>
     </div>
   );
 };