Kebab file names

snippets/render-element.md

@@ -0,0 +1,55 @@
+---
+title: Render DOM element
+tags: browser,recursion
+author: chalarangelo
+cover: maple-leaf-palette
+firstSeen: 2020-05-03T11:55:42+03:00
+lastUpdated: 2021-10-13T19:29:39+02:00
+---
+
+Renders the given DOM tree in the specified DOM element.
+
+- Destructure the first argument into `type` and `props`. Use `type` to determine if the given element is a text element.
+- Based on the element's `type`, use either `Document.createTextNode()` or `Document.createElement()` to create the DOM element.
+- Use `Object.keys()` to add attributes to the DOM element and set event listeners, as necessary.
+- Use recursion to render `props.children`, if any.
+- Finally, use `Node.appendChild()` to append the DOM element to the specified `container`.
+
+```js
+const renderElement = ({ type, props = {} }, container) => {
+  const isTextElement = !type;
+  const element = isTextElement
+    ? document.createTextNode('')
+    : document.createElement(type);
+
+  const isListener = p => p.startsWith('on');
+  const isAttribute = p => !isListener(p) && p !== 'children';
+
+  Object.keys(props).forEach(p => {
+    if (isAttribute(p)) element[p] = props[p];
+    if (!isTextElement && isListener(p))
+      element.addEventListener(p.toLowerCase().slice(2), props[p]);
+  });
+
+  if (!isTextElement && props.children && props.children.length)
+    props.children.forEach(childElement =>
+      renderElement(childElement, element)
+    );
+
+  container.appendChild(element);
+};
+```
+
+```js
+const myElement = {
+  type: 'button',
+  props: {
+    type: 'button',
+    className: 'btn',
+    onClick: () => alert('Clicked'),
+    children: [{ props: { nodeValue: 'Click me' } }]
+  }
+};
+
+renderElement(myElement, document.body);
+```