Render components after asynchronous call in React

class CardComponent extends Component {
    componentDidMount() {
        const self = this;
        api.getData(data => self.setState({ articleData: data }));
    }

    render() {
        return (
            <div>
                <h1>{'This will always render'}</h1>
                { this.state && this.state.articleData &&
                    <div>{'This will render after the return of the async call'}</div>
                }
            </div>
        )
    }
}