Dynamically Generating the Server and Channel Navs

Sam Selikoff
InstructorSam Selikoff
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

Let's round out our clone by replacing all static links with the mock data file, making sure the navigation works at every step.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

  1. Begin
  2. End

Instructor: [0:00] Our clone is looking great. We've been working on this Tailwind CSS server here and all this works. The navigation works. We can go forward and back. We can reload the app and all of the active states are correct, but we broke some of our nav in the process.

[0:16] If we click Next here, we'll see we have an error. We just need to update a little bit of this to make this all dynamic again. I went ahead and updated the format, just a tad of this data file. Before we were using keys for IDs for each server.

[0:31] I just made this a normal array of objects and updated the code right here to use that new format. Let's go back to Tailwind and fix these server links. These are over in our root app file. When we started, we were just iterating over this hard coded data. Let's delete this, import our data file from data. Down here, again, data is just a plain array now, so we can iterate over data for each server.

[1:10] Our server nav is working again. We can still click around here. If I click on Next, we'll see we get an error. That's because right now, we're hard-coding this channel ID of one, but each channel has a unique ID across all the servers.

[1:26] One belongs to Tailwind, but the first channel in Next is 17. Instead, we're just going to link to the first channel in each server. Server.categories, we'll grab the first category, .channels, grab the first channel, and then put the ID right there.

[1:47] If we go back, Tailwind still works. Let's try clicking on Next. Now we navigate to an actual channel in Next, but we see the channel nav here hasn't updated. Let's take a look at that. We were hard coding in just the Tailwind server right here.

[2:07] Instead of doing that, we already find the current server based on the router query. Let's just grab the server instead. Server.categories. Now they update. Finally, if I click on one of those links, we again, get an invalid URL. Let's come down and look at our channel link.

[2:28] We'll see we had hard-coded servers one right here. To get the current server -- we already have the router -- let's just come grab this code right here, paste it in our channel link, and then replace this with the current server's ID.

[2:49] We'll go back to a valid URL. Now check this out, all of our links are working again. The active state is good. We've got our descriptions right here. If we zoom out, we'll be able to see them. Our toggles are working. We can go to any of our servers. This is actually starting to feel like a real app now.

~ 21 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today