componentdidmount - prop-types validation

Question

Thank you for your time.

Noob React question... i know componentDidMount will fire after the first render of the component, which is why the prop-types eslint error i am getting is being triggered. However i am not sure how you would fix this and add validation, propTypes validation fires before the getArticles() function therefore if i declare a propTypes it returns undefined... as i.e. articles has not been defined until after the first render and and componentDidMount is called... have had a good dig and cant see a simple solution for what i assume is a common problem??

Question - how do you validate props that have not yet been fetched.

class ArticlesList extends Component {
  componentDidMount() {
    this.props.getArticles();
  }

  render() {
    return this.props.articles.map(({ id, date, heading, body }) => (
      <Article key={id} date={date} heading={heading} body={body} />
    ));
  }
}

const mapStateToProps = (state) => {
  return { articles: state.articles };
};

export default connect(mapStateToProps, { getArticles })(ArticlesList);

Answer 1

Destructure the componentDidMount i.e.

componentDidMount() {
{ getArticles } = this.props;
getArticles();
}

and adding

ArticlesList.propTypes = {
  getArticles: PropTypes.func,
  articles: PropTypes.array,
};