Delay rendering of child component until API request success - React

I’m building my lil’ weather app with React, but running into some confusion as to how to pass data down from the main App component to a child component in a smooth way. I’ve only just started to learn React, and hoping someone may have some input on how I can solve this nagging problem.

Right now I’m setting the state (weather, temp) by pulling data from the OpenWeatherMap API and passing it from the main App component to the CurrentWeather component, which is included in App.js. CurrentWeather renders the relevant weather icon and temperature.

The problem is, I don’t know how to delay the rendering of the CurrentWeather component until the API request is successful, so the initial state of the app is messy, instead of a blank slate/loading animation. For some reason the request seems to take significantly longer than other’s examples I’ve seen too.

I suspect this is a minor conceptual misunderstanding, and would appreciate any input!

You can use conditional rendering. For example check if the weather prop in the state has a lenght greater than zero.


Thank you! Inline conditionals is exactly what I was trying to do. React sure is awkward at first. :stuck_out_tongue: