웹
댓글 작성자에게만 버튼을 노출하기
Time Saver
2020. 11. 24. 09:23
bang-gui/blog
나의 리액트 페이지. Contribute to bang-gui/blog development by creating an account on GitHub.
github.com
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으로 충분히 구현된다.