reactjs - 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);

question from:https://stackoverflow.com/questions/65876155/componentdidmount-prop-types-validation

Answer 1

you would only get an issue for an undefined prop if you had add to your prop validation isRequired like PropTypes.array.isRequired. With that in mind you only need to define correctly your propType:

ArticlesList.propTypes = {
  articles: PropTypes.array,
}