Как сделать кнопки редактирования / удаления для ресурса в React, которые видны только его автору

Question

Я делаю проект, который имеет два пользовательских типа (на самом деле это не две разные роли, поскольку они различны, но одна не имеет дополнительных функций над другой). Пользователь типа 1 может сделать обзор, который добавляется к массиву отзывов типа 2 пользователя в их схеме в качестве ссылочного ресурса, который заполняется запросом get, который запускается при монтировании компонента и отображается в реакции.

Я хочу сделать так, чтобы каждый отзыв отображал кнопку редактирования и удаления, но она видна только автору указанного обзора.

В настоящее время у меня есть

class exampleClass extends React.Component {

{*** bunch of functions ***}

reviewMapper = (reviews) => {
     const reviewArray = reviews.map(review =>
     <div className="review-card">
         <Row>
              <Col className="review-author col-6">
                    <h4>Reviewer: { review.author }<h4>
              </Col>
         </Row>
         <Row>
              <Col className="review-content>
                    <h4> { review.review_text } </h4>
              </Col>

              {*** I want the buttons here to be visible only for the author of the review ***}

              <Button onClick={() => { this.props.editReview }}>Edit</Button>
              <Button onClick={() => { this.props.deleteReview }}>delete</Button>
         </Row>
     </div>
    );
    return reviewArray;
};

render() {
     return (
           <>
              <*** Renders some HTML ***>
              { this.props.user.reviews && this.reviewMapper(this.props.user.reviews) }
           </>
     )
}

const mapStateToProps= (state) => {
     some props: some props
}

export default connect(mapStateToProps, { some functions })(exampleClass);

Answer 1

Неважно, я дурак.

Я понял это примерно через 5 минут после публикации этого сообщения =)

reviewMapper = (reviews) => {
     const currentUser = localStorage.getItem('uid')
     const reviewArray = reviews.map(review =>

     <div className="review-card">
         <Row>
              <Col className="review-author col-6">
                    <h4>Reviewer: { review.author }<h4>
              </Col>
         </Row>
         <Row>
              <Col className="review-content>
                    <h4> { review.review_text } </h4>
              </Col>

              { currentUser === review.author && this.reviewButtonMapper() }

         </Row>
     </div>
    );
    return reviewArray;
};

reviewButtonMapper = () => {
    return (
        <>
            <Button onClick={() => {}}>edit</Button>
            <Button onClick={() => {}}>delete</Button>
        </>
    );
};