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.

Bookmark status and button toggle

Bookmark status and button toggle - 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

Bookmark status and button toggle

“

So now we can bookmark and unbookmark the property by clicking this button. But we have no feedback here to show us if it's bookmarked or not. So what we're going to do is show a different button, a different color, and different text if it is bookmarked, which this is right now. If I look at my database, you can see I have it in my bookmarks array. So let's start off by just coming down to the return and saying return, and then we'll check that is bookmark state. And we're going to use a ternary, and we'll show a remove button, else then we'll show the button that we have here. So I'm just going to copy this, the whole button in here, paste that in, but change the blue here and here to red, and then change the text to remove bookmark. All right, so I'll go ahead and save that. Now, if I reload, it's still going to be blue because we're not checking it. We're not hitting the API route when the page loads. We're only hitting it when I click. So if I click it, you see it's been removed.…

Contents