renderPostsAndComments.js

...
class PostList extends Component {

  async componentDidMount() {
    const { fetchPostsAndData } = this.props;
    await fetchPostsAndData();
  }
  
    renderPosts = () => {
      const postList = this.props.postList;

      const posts = postList.map(post => (
          <Typography variant="display1">{post.name}</Typography>
          <div>{this.renderPostComments(post)}</div>
      ));
      return posts;
    };

  renderPostComments = post => {
    if (this.props.commentsPerPost[post._id]) {
      const postsArr = this.props.commentsPerPost[post._id];
      return <div>{this.renderPostComment(postsArr)}</div>;
    } else {
      return <span>Loading...</span>;
    }
  };

  renderPostComment = postsArr => {
    if (postsArr.commentsCount === 0) {
      return <Typography>No comments.</Typography>;
    } else {
      const comments = postsArr.comments.map(comment => (
          <div>
              <Typography>{comment._userId.name}</Typography>
              <br />
              <Typography>{comment.commentDate}</Typography>
          </div>
      ));
      return comments;
    }
  };
  
  render() {
    return this.props.isPostsFetching || this.props.isPostCommentFetching ? (
      <Typography>Loading...</Typography>
    ) : (
      <Container>
          {this.renderPosts()}
      </Container>
    );
  }
}
...