Here is the component code. it is wrapped in connect function with mapStateToProps and mapDispatchToProps set appropriately.
//Parent component
componentDidMount()
{this.props.dispatchAction()}//dispatches action which sets requestPending state in redux to true and fetches data. when the data is fetched it sets requestPending to false again.
then in render method of parent component.
if (this.props.requestPending) return <Loading />;
if (!this.props.requestPending) return <SecondChild {...this.props.data} />;
the problem is that when parent component mounts, for split second requestPending is false so it renders SecondChild component. which gives undefined error since this.props.data is not fetched yet.
What is the appropriate way to render this JSX ?