From the course: React for Web Designers

Unlock this course with a free trial

Join today to access over 22,500 courses taught by industry experts.

Using conditional rendering

Using conditional rendering - React.js Tutorial

From the course: React for Web Designers

Start my 1-month free trial Buy for my team

Using conditional rendering

“

- [Instructor] When you're working with an API or other external data, ideally it's going to be super fast and no one will notice. But in reality, connections can be slow, so it's a good idea to plan for that. In this video, we're going to look at conditional rendering, setting up a loader animation that will display while our page waits for its live data. Right now, when we load this page. I'll refresh it. And it's pretty much instantaneously showing the information from our API. We never even see what's here before these messages appear. Back in our code, let's jump down to the StatusMessageList component, using Command + Shift + O. StatusMessageList, here we go. Right now, the way this works is we have the static data, here in stubStatuses, which is used first. And then after the component renders, we retrieve our status messages. Let's get rid of these stubStatuses. We're going to stop using them and just use the data from the API. So we'll start this off as an empty array. Next…

Contents