Is there a way to render category tree structure in React iteratively?

Is there a way to render this category tree structure in React iterratively? I'm currently making this flatmap array into a category tree structure iteratively, however, can't seem to find out how to render this to react iteratively? I only see a way out with recursion, but our team decided to use iteration as recursion caused some memory problems previously.

Image of the way I want this structure to render

Would be gratefull for any ideas.

  const flat = [
    { id: 1, parentId: 3 },
    { id: 3, parentId: 8 },
    { id: 4, parentId: 6 },
    { id: 6, parentId: 3 },
    { id: 7, parentId: 6 },
    { id: 8, parentId: null },
    { id: 16, parentId: null },
    { id: 10, parentId: 8 },
    { id: 15, parentId: 8 },
    { id: 13, parentId: 14 },
    { id: 14, parentId: 10 },
  ];

  const root = [];

  flat.forEach((node: any) => {
    if (!node.parentId) {
      return root.push(node);
    }

    const parentIndex = flat.findIndex((el: any) => el.id === node.parentId);
    if (!flat[parentIndex].children) {
      return (flat[parentIndex].children = [node]);
    }

    return flat[parentIndex].children.push(node);
  });

  console.log(root);

Tried to render category tree structure iteratively.

To do what you want, you can do what I described in my comment, which is to flatten the tree into an in-order array representing what you to render. To do this, you also need to track the path through the tree you've taken, aka the list of parent nodes.

This will likely be hard to follow, but it's how I'd do it. I include descriptions along the way.

Starting from your code, first let's define a root node that matches you tree node shape, since right now your root node is an array, and the nodes are objects:

const tree = { children: root };

Tree structures are easier to deal with in recursion (ironically you want to skip recursive rendering, which would be easier). To flatten the tree, lets define a recursive reducer which works on your tree. Basically Array.prototype.reduce except for your tree structure. This reduce is loosely based on this functional JS article.

const reduceTree = (reducerFn) => (init, node) => {
  const acc = reducerFn(init, node);
  if (!node.children?.length) {
      return acc;
  }
  return node.children.reduce(reduceTree(reducerFn), acc);
}

This weird looking function is "curried", so it first takes a reducerFn, then returns a function that itself takes the reduce arguments.

This will let us flatten the tree now, as it iterates the tree in order, and builds up an array of node ids:

reduceTree((acc, node) => [...acc, node.id])([], tree)
// produces [undefined, 8, 3, 1, 6, 4, 7, 10, 14, 13, 15, 16]

Note the first entry is undefined because the root node has no ID. But who cares, we can filter that out later.

The issue/question is now how to get the path to the node. The easiest way I can think of is to add the path as an argument to the reducer itself, just like how map/reduce also pass the index as the argument. So let's modify the reduce function to also pass in the path:

const reduceTree = (reducerFn) => (init, node, path = []) => {
  // Remove the current node's ID from the path by removing the last
  // entry in the path
  const acc = reducerFn(init, node, path.slice(0, -1));
  if (!node.children?.length) {
      return acc;
  }
  const reduce = reduceTree(reducerFn);
  return node.children.reduce((acc, node) => reduce(acc, node, [...path, node.id]), acc);
}

On the last line, you can see that we concat the current node's id to the path, which is what now passes the existing path to the reducer function. We default it to [] in the argument list so that users of this reducer don't have to pass in an empty path to start.

Now let's call it!

reduceTree((acc, node, path) => [...acc, [path.join('-'), node.id]])([], tree);

If you aren't used to reading reduce function signatures, this might make it a little easier to read:

// The function that "reduces" the current node with the existing
// "accumulator". In this case we're building up a nested array by
// taking what we have so far ("...acc") and adding the current path
// and node id
const reduceFn = (acc, node, path) => [...acc, [path.join('-'), node.id]];
// The accumulator value to start with
const initialValue = [];
// Do the thing
reduceTree(reduceFn)(initialValue, tree);

which produces

[
['', undefined]
['', 8]
['8', 3]
['8-3', 1]
['8-3', 6]
['8-3-6', 4]
['8-3-6', 7]
['8', 10]
['8-10', 14]
['8-10-14', 13]
['8', 15]
['', 16]
]

And you can iterate over this now in you React component. Tracking indentation and/or changing the path structure is left up to you.

The whole thing, all together:

const flat = [
  { id: 1, parentId: 3 },
  { id: 3, parentId: 8 },
  { id: 4, parentId: 6 },
  { id: 6, parentId: 3 },
  { id: 7, parentId: 6 },
  { id: 8, parentId: null },
  { id: 16, parentId: null },
  { id: 10, parentId: 8 },
  { id: 15, parentId: 8 },
  { id: 13, parentId: 14 },
  { id: 14, parentId: 10 },
];

const root = [];

flat.forEach((node) => {
  if (!node.parentId) {
    return root.push(node);
  }

  const parentIndex = flat.findIndex((el) => el.id === node.parentId);
  if (!flat[parentIndex].children) {
    return (flat[parentIndex].children = [node]);
  }

  return flat[parentIndex].children.push(node);
});

const tree = { children: root };

const reduceTree = (reducerFn) => (init, node, path = []) => {
  const acc = reducerFn(init, node, path.slice(0, -1));
  if (!node.children?.length) {
      return acc;
  }
  const reduce = reduceTree(reducerFn);
  return node.children.reduce((acc, node) => reduce(acc, node, [...path, node.id]), acc);
}

reduceTree((acc, node, path) => [...acc, [path.join('-'), node.id]])([], tree);