So we're going to take a little break from that and we're going to switch to another React fundamental. So this is going to be something that you're going to be doing quite a bit and that is implementing conditional logic into your programs.

So what I mean by conditional logic is let's imagine that we have a navbar here and that's actually going to be one of the things we implement in this guide is we're going to start adding a navbar. It's going to have home, it's going to have about, it'll have blogs. Then let's imagine because we are going to build this, it has some links that only an admin should view, so you as a site owner should be the only one who can see a few of these links.

How can you do that? Well, we're going to walk through exactly how we can implement that type of conditional behavior and we're going to start off with a basic example just so we can start to kind of have a mental framework for the syntax on what's needed for adding conditionals.

So if you switch back to the code here, let's come down and inside of our render method, let's imagine, and this is going to be something we do before building out the navbar component. Let's imagine that we are not sure when we're going to get our data back and this is going to be true, there will be times when we're going and accessing the API that our data is not going to magically appear on the site right away.

We're going to have to contact an outside service and that service is then going to send back all of our data. So in the in-between time, the user is going to see nothing on the screen and that can be a little bit confusing. So the better approach is to use a conditional for checking to see "has the data appeared? If it has, then it would show the data. But before that show loading or something like that."

Now we don't have that outside API or anything, so we're simply going to hard code this in, but that is going to teach us how we can have conditional logic inside of our render function. So in order to do this, I'm going to come inside of the render function itself and then I'm going to add a condition here. So I'm going to say if this.state.isLoading, which is an attribute we need to add to state, I'm going to say return and then we'll just pass in a div.

So I'm going to say return, div and loading... close it off and hit save. So what this is going to do is I know this may look very odd if you've never seen it before, but what we're doing is we're short circuiting the render function here. So render, even though it may look like it's this gigantic process, at the end of the day, it is just a function which means that if you call return from within any kind of JavaScript function, the rest of the function does not process.

So let's go up and let's add this isLoading item up inside of state. So right under page title, you can put it anywhere in the initial state but I'm going to say isLoading, let's set it to true and then add a comma afterwards, so you fix this syntax error, hit save, and now if you come back into Google Chrome, you can see where it says loading now, it's not showing the data.

So what we're doing here is because state says true, then it's never going to show the data because we are always adding this return statement. Now, the way this would work in a real world application is you would call that outside service.

The outside service would perform all of its work, it would wrap up the data, send it back to you, and then we have ways and we'll walk through this in a future section, we have ways of listening for that data to come back and then when it comes back, what we'll do is we'll just say this.set state and will turn isLoading to false and so the cool thing about that is it's going to create some very reactive behavior. It's going to show loading right away, and then when the data comes back, it's going to automatically change that status.

The loading content is going to go away and then what's going to happen is it's going to move down. It's going to say, "Okay, this is no longer true," and so because of that, now we'll go to the next return statement and so that is a basic way of implementing a conditional in React.

I'm gonna come back here and switch this to false so that we can always have our data showing up and I'm going to keep this here because later on we are going to implement this exact type of behavior, but we're going to wire it up so it works. Now you can see the loading does not show up anymore and now all of our data does.

I think I'm actually split this guide into two because building out the nav bar is going to take a little while. So let's take a break and when we come back we are going to add our initial navigation bar.

Resources

• Source Code