From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Active links and conditional rendering

Active links and conditional rendering - Next.js Tutorial

From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Start my 1-month free trial Buy for my team

Active links and conditional rendering

“

OK, so in this video, there's really two things I want to do. One, I want to do the active link. So if we click on Properties, that black box should be around the Properties link. And then second, I want to conditionally render some of these based on if we're logged in or not. Now, obviously, we don't have a login system yet, but we can just have a hard-coded piece of state that can be true or false. And if it's true, if isLoggedIn is true, then we'll show the add property as well as these two icons. If it's false, meaning we're not logged in, then we'll show the Login button. We also won't show this, and we won't show the add property. All right, so let's start off with the active links. So in your JSX output, anywhere where you see a BG black, we're going to remove it. So let's search for bg-black. So this is around the home link, right? And actually, there's only one, and it's around the home link. So I'm going to get rid of that initially. So now we don't have anything that has…

Contents