댓글 작성자에게만 버튼을 노출하기

github.com/bang-gui/blog

bang-gui/blog

 

const CommentItem = ({ user, comment, onToggleAskRemove }) => {
  return (
    <CommentItemBlock>
      <SubInfo
        username={comment.author.username}
        publishedDate={comment.createdAt}
      />
     {user && user._id === comment.author._id && (
        <CommentActionButtonsBlock>
          <ActionButton>수정</ActionButton>
          <ActionButton onClick={()=>onToggleAskRemove(comment._id)}>삭제</ActionButton>
        </CommentActionButtonsBlock>
      )}
      <p>{comment.body}</p>
    </CommentItemBlock>
  );
};

사람처럼 생각하자, 코멘트의 주인을 찾아주면 된다.

const CommentsList = ({loading, user, comments, onToggleAskRemove}) => {
  return (
    <CommentsListBlock>
        <div>
        {!loading && comments && (
        <div>
          {comments.map(comment => (
            <CommentItem user={user} comment={comment} onToggleAskRemove={onToggleAskRemove} key={comment._id} />
          ))}
        </div>
      )}
        </div>
    </CommentsListBlock>
  );
};

물론 대부분의 리스트들은 map으로 충분히 구현된다.