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.

Display messages

Display messages

So in the last video we created this messages component and we put it in the messages the messages page and we fetch the data in our use effect and now we have the data in our messages state so now we want to display that. So what I'm going to do is go to the theme files and go to the messages dot HTML file and then under the nav there's this section it's really not a lot so we'll just grab that and then let's go to the messages component and we'll put that right in here and then we're just going to change all the classes to class name so I'll do command shift L class name and if I save it now we should see something like this so basically we want to show one of these cards for every message that we have. Now, in the messages component, we'll keep the outline stuff, the section div. But this div, the card, we want that to be a separate message component. And that starts right here inside of the space Y4. So this div that has the class of BG white and the relative, that ends right…

Contents