如何在 React CLI 中使用 map 和 filter 列出另一个列表中的数据（评论列表和回复列表）

Question

I have a Simple comment List, Where I can list all comments, but I need is list its child (reply) list inside it by matching the commentId. Here is the code am working with.

    class comments extends Component {


     constructor(props) {
        super(props);
        this.state = {
          blogList: {},
          commentList: [{"id":"1","post_id":"1","username":"Rovan","content":"Wow","avatar":"","created_on":"2020-01-16","updated_on":null},{"id":"2","post_id":"1","username":"Ravan","content":"Woooow!","avatar":"","created_on":"2020-01-16","updated_on":null},{"id":"4","post_id":"1","username":"Ravan V","content":"Yes Ram","avatar":"","created_on":"2020-01-19","updated_on":null},{"id":"5","post_id":"1","username":"Ravan V","content":"Yes Ram","avatar":"","created_on":"2020-01-19","updated_on":null}],
          ReplyList: [{"id":"1","comment_id":"1","post_id":"1","username":"Sam","content":"wow","avatar":"","created_on":"2020-01-15","updtaed_on":null},{"id":"2","comment_id":"1","post_id":"1","username":"Ron","content":"Yes! Yes!","avatar":"","created_on":"2020-01-14","updtaed_on":null},{"id":"3","comment_id":"2","post_id":"1","username":"Sam","content":"wow","avatar":"","created_on":"2020-01-15","updtaed_on":null}]
        };
      }
       render() {
    const { commentList } = this.state;
    const { ReplyList } = this.state;

    const  replyIterationMap =  (id)=>{

      ReplyList.filter(c =>  c.comment_id === id).map((item, index) =>( 

    <div className="media d-block d-md-flex mt-3" key={index}>
          <div
            className={
              Style.avatar +
              " " +
              this.AvatarColorChange(item.username.substring(0, 1))
            }
          >
            <h2 className="text-center pt-1 mt-md-1 mt-sm-2 mt-lg-1">
              {item.username.substring(0, 1).toUpperCase()}
            </h2>
          </div>
          <div className="media-body text-center text-md-left ml-md-3 ml-0">
            <h5 className="mt-0 font-weight-bold">
              {item.username}
              <span
                className={
                  Style.relativeDate + " float-right font-weight-lighter"
                }
              >
                <Moment format="MMM 'DD">{item.created_on}</Moment>
              </span>
            </h5>
            <p>{item.content}</p>

            <hr />
          </div>
        </div>
      ))};

    const commentIterationMap = commentList.map((item, index) => (
      <div
        className={Style.comments + " media d-block d-md-flex mt-4"}
        key={index.toString()}
      >
        <div
          className={
            Style.avatar +
            " " +
            this.AvatarColorChange(item.username.substring(0, 1))
          }
        >
          <h2 className="text-center pt-1 mt-md-1 mt-sm-2 mt-lg-1">
            {item.username.substring(0, 1).toUpperCase()}
          </h2>
        </div>
        <div className="media-body text-center text-md-left ml-md-3 ml-0">
          <h5 className="font-weight-bold">
            {item.username}
            <span
              className={
                Style.relativeDate + "  float-right font-weight-lighter"
              }
            >
              <Moment format="MMM DD">{item.created_on}</Moment>
            </span>
          </h5>
          <p>{item.content} </p>

          <div className="text-right pt-1">
            <a href="#i" id="reply">
              Replay
            </a>
          </div>
          <hr />
            { replyIterationMap(item.id)}

        </div>
      </div>
    ));

   return (
      <div className="comments">
      {commentIterationMap}
      </div>
);}
}
export default comments;

I want to get list all comments and corresponding reply by macting the comments. Like below image

I tried the above code it didn't work for me, i need to list those comments and reply above image

Answer 1

In the render method, you are not calling the commentIterationMap method. Also, in the replyIterationMap you are not returning the JSX for the replies.

Furthermore, I would declare the commentIterationMap and replyIterationMap methods as methods of the class (instead of defining them in the render method). I would also call them differently ( renderComments and renderReplies respectively), as to note that they are responsible for rendering some parts of the JSX.

Taking all that into account, the code would look like:

class comments extends Component {
    constructor(props) {
        super(props);
        this.state = {
            blogList: {},
            commentList: [{ 
                "id":"1",




   "post_id":"1",
"username":"Rovan","content":"Wow","avatar":"","created_on":"2020-01-16","updated_on":null
},{"id":"2","post_id":"1","username":"Ravan","content":"Woooow!","avatar":"","created_on":"2020-01-16","updated_on":null},{"id":"4","post_id":"1","username":"Ravan V","content":"Yes Ram","avatar":"","created_on":"2020-01-19","updated_on":null},{"id":"5","post_id":"1","username":"Ravan V","content":"Yes Ram","avatar":"","created_on":"2020-01-19","updated_on":null}],
          ReplyList: [{"id":"1","comment_id":"1","post_id":"1","username":"Sam","content":"wow","avatar":"","created_on":"2020-01-15","updtaed_on":null},{"id":"2","comment_id":"1","post_id":"1","username":"Ron","content":"Yes! Yes!","avatar":"","created_on":"2020-01-14","updtaed_on":null},{"id":"3","comment_id":"2","post_id":"1","username":"Sam","content":"wow","avatar":"","created_on":"2020-01-15","updtaed_on":null}]
        };
    }

    renderReplies(commentId) {
        return this.state.ReplyList
            .filter(c => c.comment_id === commentId)
            .map((item, index) => ( 
                <div className="media d-block d-md-flex mt-3" key={index}>
                    <div
                        className={
                            Style.avatar +
                            " " +
                            this.AvatarColorChange(item.username.substring(0, 1))
                        }
                    >
                        <h2 className="text-center pt-1 mt-md-1 mt-sm-2 mt-lg-1">
                            {item.username.substring(0, 1).toUpperCase()}
                        </h2>
                    </div>
                    <div className="media-body text-center text-md-left ml-md-3 ml-0">
                        <h5 className="mt-0 font-weight-bold">
                            {item.username}
                            <span
                                className={
                                    Style.relativeDate + " float-right font-weight-lighter"
                                }
                            >
                                <Moment format="MMM 'DD">{item.created_on}</Moment>
                            </span>
                        </h5>
                        <p>{item.content}</p>

                        <hr />
                    </div>
                </div>
            ));
    }

    renderComments() {
        return this.state.commentList.map((item, index) => (
            <div
                className={Style.comments + " media d-block d-md-flex mt-4"}
                key={index.toString()}
            >
                <div
                    className={
                        Style.avatar +
                        " " +
                        this.AvatarColorChange(item.username.substring(0, 1))
                    }
                >
                    <h2 className="text-center pt-1 mt-md-1 mt-sm-2 mt-lg-1">
                        {item.username.substring(0, 1).toUpperCase()}
                    </h2>
                </div>
                <div className="media-body text-center text-md-left ml-md-3 ml-0">
                    <h5 className="font-weight-bold">
                        {item.username}
                        <span
                            className={
                                Style.relativeDate + "  float-right font-weight-lighter"
                            }
                        >
                            <Moment format="MMM DD">{item.created_on}</Moment>
                        </span>
                    </h5>
                    <p>{item.content} </p>

                    <div className="text-right pt-1">
                        <a href="#i" id="reply">
                            Replay
                        </a>
                    </div>
                    <hr />
                    {this.replyIterationMap(item.id)}

                </div>
            </div>
        ));
    }

    render() {
        return (
            <div className="comments">
                {this.commentIterationMap()}
            </div>
        );
    }
}
export default comments;

Answer 2

This method too works on it.

class Comment extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
            commentList: [{"id":"1","post_id":"1","username":"Rovan","content":"Wow","avatar":"","created_on":"2020-01-16","updated_on":null},{"id":"2","post_id":"1","username":"Ravan","content":"Woooow!","avatar":"","created_on":"2020-01-16","updated_on":null},{"id":"4","post_id":"1","username":"Ravan V","content":"Yes Ram","avatar":"","created_on":"2020-01-19","updated_on":null},{"id":"5","post_id":"1","username":"Ravan V","content":"Yes Ram","avatar":"","created_on":"2020-01-19","updated_on":null}],

         ReplyList: [{"id":"1","comment_id":"1","post_id":"1","username":"Sam","content":"wow","avatar":"","created_on":"2020-01-15","updtaed_on":null},{"id":"2","comment_id":"1","post_id":"1","username":"Ron","content":"Yes! Yes!","avatar":"","created_on":"2020-01-14","updtaed_on":null},{"id":"3","comment_id":"2","post_id":"1","username":"Sam","content":"wow","avatar":"","created_on":"2020-01-15","updtaed_on":null}]
        }
      }

      render() {
        const { commentList } = this.state;
        const { ReplyList } = this.state;

        const  replyIterationMap =  (id)=>{
          //console.log(id);
        return  ReplyList.filter(c =>  c.comment_id === id).map((item, index) => (

        <div className="media d-block d-md-flex mt-3" key={index}>
              <div
                className="avatar"
              >
                <h2 className="text-center pt-1 mt-md-1 mt-sm-2 mt-lg-1">
                  {item.username.substring(0, 1).toUpperCase()}
                </h2>
              </div>
              <div className="media-body text-center text-md-left ml-md-3 ml-0">
                <h5 className="mt-0 font-weight-bold">
                  {item.username}
                  <span
                    className={" float-right font-weight-lighter"
                    }
                  >
                    {item.created_on}
                  </span>
                </h5>
                <p>{item.content}</p>

                <hr />
              </div>
            </div>
          ))};

        const commentIterationMap = commentList.map((item, index) => (
          <div
            className=" media d-block d-md-flex mt-4"
            key={index.toString()}
          >
            <div
              className="avatar"
            >
              <h2 className="text-center pt-1 mt-md-1 mt-sm-2 mt-lg-1">
                {item.username.substring(0, 1).toUpperCase()}
              </h2>
            </div>
            <div className="media-body text-center text-md-left ml-md-3 ml-0">
              <h5 className="font-weight-bold">
                {item.username}
                <span
                  className="float-right font-weight-lighter"

                >
                  {item.created_on}
                </span>
              </h5>
              <p>{item.content} </p>

              <div className="text-right pt-1">
                <a href="#i" id="reply">
                  Replay
                </a>
              </div>
              <hr />
                { replyIterationMap(item.id)}

            </div>
          </div>
        ));

        return (
          <div className="row">
            <div className="col-md-12">
              <div className="comments">
                <div className="card mb-3 wow fadeIn">
                  <div className="card-header font-weight-bold">
                    {commentList.length} Comments
                  </div>
                  <div className="card-body">{commentIterationMap}</div>
                </div>
              </div>
            </div>
          </div>
        )
      }
    }
export default Comment;

Here is the working Live Code demo Link Jsfiddle