Use recursion to render a virtual tree

Given an object that resembles a virtual tree. You need to recursively go through all the branches of the object and render the elements according to its internal hierarchy.

I’ve written a function, but it has bugs.

I can’t reset parent variable. It seems necessary to implement the function differently using recursion

const tree = {
    type: 'component',
    children: [
        {
            type: 'host',
            tag: 'div',
            children: 'div content',
        },
        {
            type: 'component',
            children: [
                {
                    type: 'host',
                    tag: 'div',
                    children: [
                        {
                            type: 'host',
                            tag: 'span',
                            children: 'span content'
                        },
                        {
                            type: 'host',
                            tag: 'span',
                            children: 'span content'
                        },
                    ]
                }
            ]
        },
        {
            type: 'host',
            tag: 'div',
            children: 'div content',
        }
    ]
}

let parent = null;

function renderTree(tree) {
    const treeBox = document.getElementById('tree');

    for (const key in tree) {
        const value = tree[key];

        if (key === 'children') {
        }

        if (Array.isArray(value)) {
            renderTree(value);
        }

        if (!Array.isArray(value) && typeof value === "object") {
            if (value.type !== "component") {
                let isNested = false;

                const element = document.createElement(value.tag);

                if (parent) {
                    parent.appendChild(element);
                } else {
                    treeBox.appendChild(element);
                }

                if (Array.isArray(value.children)) {
                    isNested = !isNested;
                    parent = element;
                }

                if (!Array.isArray(value.children)) {
                    element.textContent = value.children;
                }

                // if(isNested == false) {
                //   parent = null;          
                // }

            }

            renderTree(value)
        }
    }
}

renderTree(tree);

>Solution :

Assuming components don’t need to have a physical presence, but they’d just render their children:

const tree = {
  type: "component",
  children: [
    {
      type: "host",
      tag: "div",
      children: "div content",
    },
    {
      type: "component",
      children: [
        {
          type: "host",
          tag: "div",
          children: [
            {
              type: "host",
              tag: "span",
              children: "span content",
            },
            {
              type: "host",
              tag: "span",
              children: "span content",
            },
          ],
        },
      ],
    },
    {
      type: "host",
      tag: "div",
      children: "div content",
    },
  ],
};

function renderTreeNode(tn, element) {
  const { type, tag, children } = tn;
  if (type === "component") {
    for (const child of children) {
      renderTreeNode(child, element);
    }
  } else if (type === "host") {
    const el = document.createElement(tag);
    if (Array.isArray(children)) {
      for (const child of children) {
        renderTreeNode(child, el);
      }
    } else {
      el.textContent = children;
    }
    element.appendChild(el);
  } else {
    throw new Error("Unknown type");
  }
}

renderTreeNode(tree, document.body);

div {
  background: pink;
  padding: 1em;
  margin: 1em;
}

span {
  background: orange;
}