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!

"Have tried a conditional render on the subcomponent...but didn't work" Show your code. I'd say this is the best practise: check if state was loaded and render a loading indicator if not. — Yury Tarabanko
– Yury Tarabanko, Commented Aug 1, 2017 at 8:14

Shubham Jain · Accepted Answer · 2017-08-01 08:13:23Z

4

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.

answered Aug 1, 2017 at 8:13

Shubham Jain

9301 gold badge14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ky Lane Over a year ago

Thanks @Shubham - That was helpful - finally managed how to set an initialState for the array.

Ky Lane Over a year ago

How would I go about setting an initial state to map a list against @Shubham Jain? ['org_units', [ ['', ''] ]], ['positions', [ ['', ''] ]], I'm getting some React errors... TypeError: Cannot read property 'map' of undefined

Shubham Jain Over a year ago

I am not able to understand what you are trying to do. Could you please elaborate?

Ky Lane Over a year ago

Thanks for the replies. Let me do some digging, and get back to you.

Collectives™ on Stack Overflow

React component rendering before redux/state updates from API

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related