https://stackoverflow.com/questions/61903812/how-to-wait-until-context-value-is-set-react

gistfile1.txt

export default class DtcSearchPage extends Component {
  static contextType = MechContext;

  componentDidMount() {
    const {
      filteredDtcComments,
      setFilteredCommentList,
      setError,
      clearError
    } = this.context;

    clearError();

    MechApiService.getSpecificDtcCommentList(filteredDtcComments[0].id)
      .then(res => console.log(res))  
      .then((res) => setFilteredCommentList(res))
      .catch(setError);
  }

  renderFilteredDtcCommentListHeader() {
    const { filteredDtc = [] } = this.context;
    return (
      <FilteredDtcCommentListItemHeader
        key={filteredDtc.id}
        specificDtc={filteredDtc}
      />
    );
  }

  renderFilteredDtcCommentList() {
    const { filteredDtcCommentList = [] } = this.context;
    return filteredDtcCommentList.map((comment) => (
      <FilteredDtcCommentListItem key={comment.id} comment={comment} />
    ));
  }

  render() {
    const { error } = this.context;

    return (
      <main className="DtcSearchPage__main">
        <div className="DtcSearchPage__screen-wrapper">
          <Section list className="DtcSearchPage">
            <div className="DtcSearchPage__header-wrapper">
              {error ? (
                <p className="DtcSearchPage__orange">
                  Error. Please try again.
                </p>
              ) : (
                <div className="DtcSearchPage__header">
                  {this.renderFilteredDtcCommentListHeader()}
                </div>
              )}
            </div>
            <div className="DtcSearchPage__items-wrapper">
              {error ? (
                <p className="DtcSearchPage__orange">
                  Error. Please try again.
                </p>
              ) : (
                <div className="DtcSearchPage__items">
                  {this.renderFilteredDtcCommentList()}
                </div>
              )}
            </div>
          </Section>
        </div>
      </main>
    );
  }
}