My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

ReactJS: How to render components only after successful asynchronous call?

Anand Reddy Rikka's photo
Anand Reddy Rikka
·Dec 19, 2016

I'm from angular background and trying to learn reactjs by implementing a website(https://tmdbredux.herokuapp.com). Now and then I face issues and try to find answers, but this one I havn't found a proper way to do it.

How to render react components after only successful asynchronous calls

class CardComponent extends Component {
    constructor(props) {
            super(props);
    }
    componentDidMount() {
        //doing some asynchronous call here which dispatches an action 
        //and updates the state -> which inturn renders the component again.
        //I want component to be rendered after this happended. Is it possible ?
    }
    //This render is begin called even before props getting updated
    render() {
        return (
            <div>Component Rendered Here </div>
        )
    }
}

Being from angular background I'm facing tough time to handle null conditions on object, because without props getting updated with appropriate data object might throw errors.

Please suggest any good practices or solution for the problem

Thanks in Advance