Nesting react same compoennt dynamically

Question

I want to call the component inside the same component dynamically.

        commentdata = [
  {
    "_id": "5dbc479babc1c22683b73cf3",
    "comment": "wow .. this is awsome",
    "children": [
      {
        "_id": "5dbc481ec3bb512780ebda22",
        "comment": "second child",
        "children": [
          {
            "_id": "5dbc481ec3bb512780ebda22",
            "comment": "hi darling",
            "children": [],
            "user": {
              "_id": "5dbb81c8c597533bf4c38e75",
              "username": "arunkavale",
              "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
            },
            "updatedDate": "2019-11-01T14:58:38.188Z",
            "createdDate": "2019-11-01T14:58:38.188Z"
          }
        ],
        "user": {
          "_id": "5dbb81c8c597533bf4c38e75",
          "username": "arunkavale",
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
        },
        "updatedDate": "2019-11-01T14:58:38.188Z",
        "createdDate": "2019-11-01T14:58:38.188Z"
      },
      {
        "_id": "5dbc481ec3bb512780ebda22",
        "comment": "yep",
        "children": [],
        "user": {
          "_id": "5dbb81c8c597533bf4c38e75",
          "username": "arunkavale",
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
        },
        "updatedDate": "2019-11-01T14:58:38.188Z",
        "createdDate": "2019-11-01T14:58:38.188Z"
      }
    ],
    "user": {
      "_id": "5dbb9683b44bfa2a3dce55bd",
      "username": "mayank",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/alxndrustinov/128.jpg"
    },
    "createdDate": "2019-11-01T14:56:27.580Z",
    "updatedDate": "2019-11-01T14:58:38.188Z",
    "__v": 0
  }
]

above is the comment list data which i am gettig from bcakend .

import React from 'react';
import CommentDetail from './commentDetails';

class CommentList extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        const comments = this.props.comments.map((comment)=>{
            return <CommentDetail comment={comment.comment} key={comment._id}  author = {comment.user} timeAgo={comment.createdDate}></CommentDetail>
        })
        return (
            <div >
               {comments}
            </div >
        )
    }
}

export default CommentList;

.

import React from 'react';
import CommentAction from './commentAction';

const CommentDetail = (props) =>{
    console.log(props);

    return (
        <div className="comment">
            <a href="/" className="avatar">
            <img alt="avatar" src={props.author.avatar} />
            </a>
            <div className="content">
                <a href="/" className="author">
                    {props.author.username}
                </a>
                <div className="metadata">
                    <span className="date">
                    {props.timeAgo}
                    </span>
                </div>
                <div className="text">{props.comment}</div>
                <CommentAction user={props.author}></CommentAction>
            </div>
        </div>
    )
}

export default CommentDetail;

the above all code is working fine but I want something like

    import React from 'react';
import CommentDetail from './commentDetails';

class CommentList extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
        const comments = this.props.comments.map((comment)=>{
            if(comment.children.length>0){
                let children=[];
                for (let i = 0; i < comment.children.length; i++) {
                    let commentComp = <CommentDetail comment={comment.comment} key={comment._id}  author = {comment.user} timeAgo={comment.createdDate}>

                            <CommentDetail comment={comment.children[i].comment} key={comment.children[i]._id}  author = {comment.children[i].user} timeAgo={comment.children[i].createdDate}>
                            </CommentDetail>
                    </CommentDetail>

                    children.push(commentComp)
                }
                return children
            }
            return <CommentDetail comment={comment.comment} key={comment._id}  author = {comment.user} timeAgo={comment.createdDate}></CommentDetail>
        })
        return (
            <div >
               {comments}
            </div >
        )
    }
}

export default CommentList;

here the function should check if is there any children if yes then it should call CommentDetail with nested all his children as in CommentDetail component. I tried recursive function but I didn't get ...please help me with this. and thank you in advance .

Answer 1

I'm not entirely sure what you want your desired output to be but CommentDetail does not process children in any way so nesting a commentDetail within a commentDetail will only show the top level of your array in this case.

First create a renderComments method outside your render (render should be simply to render in most cases)

Next wrap that render function in a <ul> and return <li> from a map function

Within that <li> check to see if there are children and if so nest another <ul> and renderComments with the comment.children recursively

Runnable Snippet:

class CommentList extends React.Component {
  renderComments = (comments) => (
      comments.map(comment=>(
        <li key={comment._id}>
          <CommentDetail comment={comment} />
          {comment.children.length && <ul>{this.renderComments(comment.children)}</ul>}
        </li>
      ))
  )

  render(){
      return <ul>{this.renderComments(this.props.commentdata)}</ul>
  }
}






















const CommentDetail = ({comment}) =>{

  return (
    <div className="comment">
      <a href="/" className="avatar">
        <img alt="avatar" src={comment.user.avatar} />
      </a>
      <div className="content">
        <a href="/" className="author">
          {comment.user.username}
        </a>
        <div className="metadata">
          <span className="date">
            {comment.createdDate}
          </span>
        </div>
        <div className="text">
          {comment.comment}
        </div>
      </div>
    </div>
  )
}






const commentdata = [
  {
    "_id": "5dbc479babc1c22683b73cf3",
    "comment": "wow .. this is awsome",
    "children": [
      {
        "_id": "5dbc481ec3bb512780ebda25",
        "comment": "second child",
        "children": [
          {
            "_id": "5dbc481ec3bb512780ebda23",
            "comment": "hi darling",
            "children": [],
            "user": {
              "_id": "5dbb81c8c597533bf4c38e73",
              "username": "arunkavale",
              "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
            },
            "updatedDate": "2019-11-01T14:58:38.188Z",
            "createdDate": "2019-11-01T14:58:38.188Z"
          }
        ],
        "user": {
          "_id": "5dbb81c8c597533bf4c38e72",
          "username": "arunkavale",
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
        },
        "updatedDate": "2019-11-01T14:58:38.188Z",
        "createdDate": "2019-11-01T14:58:38.188Z"
      },
      {
        "_id": "5dbc481ec3bb512780ebda24",
        "comment": "yep",
        "children": [],
        "user": {
          "_id": "5dbb81c8c597533bf4c38e71",
          "username": "arunkavale",
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/johnsmithagency/128.jpg"
        },
        "updatedDate": "2019-11-01T14:58:38.188Z",
        "createdDate": "2019-11-01T14:58:38.188Z"
      }
    ],
    "user": {
      "_id": "5dbb9683b44bfa2a3dce55bd",
      "username": "mayank",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/alxndrustinov/128.jpg"
    },
    "createdDate": "2019-11-01T14:56:27.580Z",
    "updatedDate": "2019-11-01T14:58:38.188Z",
    "__v": 0
  }
]


ReactDOM.render(
  <CommentList commentdata={commentdata}/>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>