Reputation: 861
Very often I find myself in a scenario which is very common I think, when I need to render data in a child component that comes from props, but is fetched from an api in the parent component. On the first render the data is still fetching, so the child component has nothing to render. I sometimes use a loading flag, and render the whole child component when the data comes, else I render some message that the data is still loading or I render null
. But what if I want the component to be there and only fill the data when it comes? This is very tedious if I have props that are nested objects, so I have to define the structure of the data in the state of the parent so I don't access objects that don't exist, or I have to check manually in the child component if they are not undefined. So, the question is, is there any recommended way of doing this? How do you do it?
Upvotes: 2
Views: 49
Reputation: 527
There are many ways in fact.
Most common way is to render something to indicate user that there is something loading in the background and you could wait to see that.
Could be simple text "We're loading your content....."
Could be something like spinning icon.
Or event better the facebook preloader.
Upvotes: 1
Reputation: 1776
One of the most popular practice is to render string: 'N/A' that mean not applicable, not available or no answer.
Upvotes: 2