reactjs - How to create a new object from parent/child relationships using recursive JavaScript map method

Question

I've got an array of objects. Some of them have a wordpress_parent prop with a value `. This means this node is a child of another node. The actual end result is a nested comment UI, so there can be multiple levels of children.

I'd like to loop through my objects and where wordpress_parent !== 0, find the object in the original array whose wordpress_id equals the value of wordpress_parent and put that object as a child property of the matching parent node.

I want to achieve this object form:

node {
    ...originalPropsHere,
    children: { ...originalChildNodeProps } 
}

The idea is to create a new array with the proper nested structure of parent, children that I can then iterate over and pump out into a JSX structure.

I want to write a recursive function that does this logic and then returns a JSX comment structure like this (basically):

<article className="comment" key={node.wordpress_id}>
    <header>
        <a href={node.author_url} rel="nofollow"><h4>{node.author_name}</h4></a>
        <span>{node.date}</span>
    </header>
    {node.content}
</article>

I figure I have to use JavaScripts' map method to create a new array. The trouble I'm having is manipulating the data to create a new children property on my parent nodes, then placing the matching child comment as the value of that property. Then placing that in a nice little function that recursively goes through and creates the HTML/JSX structure that I can render in my components.

Smarter folks, step right up please, and thank you! :D

Answer 1

This is a modification of another answer, which handles the extra node wrapper and your id and parent property names:

const nest = (xs, id = 0) => 
  xs .filter (({node: {wordpress_parent}}) => wordpress_parent == id)
     .map (({node: {wordpress_id, wordpress_parent, ...rest}}) => ({
       node: {
         ...rest,
         wordpress_id, 
         children: nest (xs, wordpress_id)
       }
     }))

const edges = [
  {node: {content: 'abc', wordpress_id: 196, wordpress_parent: 193}},
  {node: {content: 'def', wordpress_id: 193, wordpress_parent: 0}},
  {node: {content: 'ghi', wordpress_id: 199, wordpress_parent: 193}},
  {node: {content: 'jkl', wordpress_id: 207, wordpress_parent: 0}},
  {node: {content: 'mno', wordpress_id: 208, wordpress_parent: 207}},
  {node: {content: 'pqr', wordpress_id: 209, wordpress_parent: 208}},
  {node: {content: 'stu', wordpress_id: 224, wordpress_parent: 207}}
]

console .log (
  nest (edges)
)

.as-console-wrapper {max-height: 100% !important; top: 0}