React-redux - Passing Down Props Before Async Data Arrives

I receive the 'Uncaught TypeError: Cannot read property 'data' of null' error in the console when I'm loading up my page. In the constructor I call an external api for data with ax

Solution 1:

I find this to be a good use case for conditional rendering.

Your render could check to see whether the data has loaded or not and if not, render something indicating it is still loading.

A simple implementation could be:

render() {
    return (
        !this.props.data ?
            <div>Loading...</div>
        :
            <div>{this.props.data}</div>
    )   
}

Solution 2:

You could set defaultProps:

TranslationDetail.defaultProps= {
    translation: { 
        data: {}
    }
};