Build a Livewire Comment System

Sign in Get started

This episode is for members only

Sign up to access "Build a Livewire Comment System" right now.

Already a member? Sign in to continue

Playing

09. Showing comment replies

Transcript

00:00

Okay. So we can now reply to comments, but we don't see these replies.

00:05

Let's go ahead and get these output underneath the parent comment. Now, the great thing about this is we can actually reuse this same comment item component when we're displaying children. There's no need to create a separate one unless you needed

00:20

any additional functionality. So just underneath at the very bottom of here, let's start to iterate through all of the children. So first things first, let's add in an if statement to check if

00:31

we actually have any children. So let's say children and count. If that's the case, then we can start to iterate through. So let's create another container out here just to space things out a little bit.

00:44

So let's set the margin on the left eight. So these look like they're replies and we'll set the margin on the top to eight as well, to give this a little bit of space. So now we need to do is add in a for each on each of the comment children.

00:58

So let's say comment and children, and we'll just call these child. Okay. So inside of here, what do we do? Well, we're just going to use the same live wire comment

01:09

item for each of these children. So we want to pass a comment in that comment is now the child rather than the parent comment. And of course we want to give this a key.

01:19

So if anything updates live wire knows what to do. Okay. Let's just see what this looks like over in the browser. There we go.

01:27

Great. So all of these replies now that we've posted and now being shown, of course, in exactly the same format, cause we reusing the same component that we used here, and it has all of the same functionality as well.

01:40

Now that's a good thing, but it's also not a good thing because we don't want to allow unlimited nested replies. We'll fix that up a little bit later. But let's just go ahead and post another reply here and see what happens.

01:51

So I'm going to choose another comment and just say a reply hit this. And yeah, sure enough updates because all of these comments are being updated when we post a new reply. This is just getting in the fresh data and showing us each of the children.

Episode summary

In this episode, we tackle the next step of our comment system: actually displaying comment replies underneath the parent comments. Up to this point, we could reply to comments, but we really weren't seeing those replies show up anywhere!

We walk through how to output replies directly below the parent comment by iterating through each comment's children and rendering them using the same comment item component. No need to reinvent the wheel or make a separate component—unless we need some extra functionality down the line!

You'll see how we add a check for child comments, add some margin to visually indicate nesting, and then use a loop to render each reply. We also talk about the importance of keys for Livewire so updates happen smoothly.

By the end, you get to see the replies show up in the browser in real time, using exactly the same style and features because we're reusing our existing comment component. There's a side note: currently, this could potentially allow infinite nested replies—which we'll address in a future episode. But for now, you can post replies and see them appear immediately, complete with all the right functionality!

Episode discussion

No comments, yet. Be the first!