Nested Comment Reply stucture with ReactJS

by moondaddi on 2018-08-31


Nested Comment Reply structure?

Nested Comment Structure


How-to with ReactJS

It can be resolve with loop structures with <Comment /> and <Comments>

const Comments = ({ items, postId, commentId, level, history }) => {
  if (items) {
    return items.map(item => {
      if (!item.parentComment || level !== 0) {
        return (
          <Comment
            item={item}
            postId={postId}
            parentCommentId={commentId}
            key={item.id}
            level={level}
            history={history}
          />
        );
      } else {
        return null;
      }
    });
  } else {
    return null;
  }
};

class Comment extends React.Component {
  render() {
    return (
      <>
        {this.props.item.recomment.length > 0 ? (
          <Comments
            items={data.qnaboardcomment}
            postId={this.props.postId}
            level={this.props.level + 1}
            history={this.props.history}
            commentId={this.props.item.id}
          />
        ) : null}
      </>
    );
  }
}