How to map an array with unknown nesting levels?

Question

I have an array of comments which can have answers, so every element (comment) of the array can have nested elements (comments) and the nesting level is unknown, but I need to render this array in ReactJs to display these comments with the given nesting level.

comment 1
-- comment 2
-- comment 3
---- comment 4
-- comment 5
comment 6
-- comment 7

Something like this. But I have no idea how to do this.

I would like to see an example how to render it with ReactJs, but an example how to map such arrays in JavaScript would be helpful as well.

My array is more complex then an array of strings, but let's imagine that this is like

[
  {
    "value": "awesome",
    "comments": [
      {
        "value": "thanks"
        "comments": null
      },
      {
        "value": "really awesome",
        "comments": [
          "value": "thanks again",
          "comments": null
        ]
      }
    ]
  }
]

I hope this example will help.

Does this answer your question? how to render child components in react.js recursively — user13198697
– user13198697, Commented Apr 6, 2020 at 19:49

Viktor W · Accepted Answer · 2020-04-06 19:22:24Z

3

You would use a recursive function. Recursive means that the function calls itself, or in the case of React, a component that returns itself as a child.

Here is an example which renders the value as a paragraph element, and then renders the child comments.

function Comment(props) {
    return (<>
        <p>{props.value}</p>
        {props.comments ? 
            props.comments.map(comment => {
                return <Comment comments={comment.comments} />
            })
        : null}
    </>)
}

answered Apr 6, 2020 at 19:22

Viktor W

1,1596 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dmitriy Movchaniuk Over a year ago

I like it and I will try it

Ardy Febriansyah · Accepted Answer · 2020-04-06 19:22:34Z

2

You can render its recursively

const data = [
  {
    "value": "awesome",
    "comments": [
      {
        "value": "thanks"
        "comments": null
      },
      {
        "value": "really awesome",
        "comments": [
          "value": "thanks again",
          "comments": null
        ]
      }
    ]
  }
]

const CommentItem = (props) => {
  return (
    <div>{props.item.value}</div>
    {
      Array.isArrray(props.item.comments) && 
      props.item.comments.length >= 1 &&
      props.comments.map(comment => (
        <CommentItem item={comment.comments}/>
      )
    }
  )
}

return data.map(comment => <CommentItem item={comment}/>)

answered Apr 6, 2020 at 19:22

Ardy Febriansyah

7681 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to map an array with unknown nesting levels?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related