React component rendering before redux/state updates from API

Question

A week into learning React, and I've hit a snag.

So, I have an action/reducer setting up an external API to pass the payload into the state for my component to render some of the values out in a subcomponent (being passed as a prop object) - however, it takes a few seconds for the API to respond and obviously I cant ask react to render any values before then, as they return null and crash react..

Best practise? Set default values for the state values until the state gets updated to avoid the null errors? Is there a better way?

Have tried a conditional render on the subcomponent (which will render the values) but didn't work.

Any advice greatly appreciated!

Answer 1

You must first set some initial value of state inside of reducers which is generally null or empty object. Now inside of your render method you must use conditional rendering and return appropriate jsx from that. This is the standard way to get data from APIs and then rendering it inside of the component. This could probably help you.