Nesting and keying components: Learn Livewire

00:10

about keying things in iterations. Now, most applications you build, you're gonna be iterating through things, but with LiveWire, we need to add a key

00:20

when we're iterating over things. Now, this is a really hard thing to demonstrate until we get into more complex functionality, but I'm gonna talk to you about why this is important now

00:30

and then maybe later on, once we've added a few more bits to our application, we can demonstrate how this works. So let's hop over to our editor, and we know that over in our book index,

00:40

we're iterating through a list of things. Now, what happens when LiveWire rehydrates is it needs to know the unique ID of each item so it can correctly re-render.

00:53

Now again, that's really difficult to demonstrate, but let me show you what you need to do when you are iterating things. And then the second thing we're gonna cover here

01:01

is moving this thing over here, this book item over to its own component. So let's go and add in here a wire key, and all we need to do into this is pass in some unique thing

01:16

from the things that we're iterating over. Now, this is pretty straightforward with our books directly from our database, because we know we get back an ID from our books.

01:25

So in here, we're just gonna go ahead and say, book ID. Now, that's not going to make any difference whatsoever to what we have here.

01:33

It's gonna work in exactly the same way. When we click something, it's still gonna refresh and update. But now LiveWire knows that this is a unique item

01:42

and it identifies that by its key. Now, we can do exactly the same thing when we have components within components. So why would we want to move this book

01:52

over to its own component? Well, as we saw from the demo in the introduction, this book will have its own functionality. We will be able to do things like editing the book,

02:04

deleting the book, updating the notes. And at the moment, we don't have a single component that can handle this functionality for each individual book.

02:13

So when you are iterating over things like this, if you don't need to create another component within a component, don't do it. But if you do, in our case,

02:21

we know that we're gonna have individual book functionality. We're gonna move this over to its own component. And I'm gonna show you how to do that now. So let's start out, of course, with a component.

02:31

So let's go and say LiveWire make, and I'm gonna call this book item. Again, the naming conventions here are pretty similar. We have a single item, which represents a book.

02:43

So again, our book item is pretty much the default. Our book item template is again, just an empty blade file here, but we can start to move this over now.

02:53

So let's just try this out. So I'm gonna go ahead and grab all of the code that we used to output our book. And I'm gonna move this over to our book item

03:02

just inside of here. Now, another really important thing within LiveWire, just while we're here, we always need an outer container, an outer wrapper for any component that we create.

03:13

I'll show you an example of that in just a minute. Now, this wire key does not now belong within this individual component. Where it belongs is within the loop

03:24

when we output that component. So let's go ahead and just do this first of all. So LiveWire and book item, and let's leave it at that for now

03:34

and just see what happens. So we've taken the markup, put it into a new component, and we're now just rendering that component out within that loop.

03:44

Now, if we head over, you can see we've got undefined variable book. LiveWire doesn't know within this component what a book is, it's not within the scope of it.

03:54

So how do we get around this? Well, over in our book item, we can go ahead and define this now as a public property. The reason we don't use this in render

04:03

is because we're effectively passing each of these books down to this component, and we kind of want to take it in like a constructor. We don't need to create a constructor out.

04:13

We can do something very similar, but very simply what we can do is just create out a public book variable in here. We don't need to assign this a default value,

04:22

and we can type hint as well just to make sure we're getting the right thing through. So now we know that public properties in LiveWire are accessible via the templates.

04:32

So now what we should see is this start to work. Now we need to actually pass this book into this component somehow, and we can do that by binding in.

04:42

So it's not a literal here, we are binding in this book value. If you wanted to pass a string in, for example, you could do that,

04:49

but in our case, we're binding book into here. So replace this component out, pass the book into this component, kind of accept this in like a constructor would,

05:00

like a property, and it's working. So now what we've done is we've given the benefit here of having each of these books as their own LiveWire component,

05:09

and we can toggle state within each of these individual things, and that's gonna make it really easy to add the functionality that we need.

05:16

Now, another way that you can do this is you can take the mount method, which is a lifecycle hook within LiveWire, there are quite a few of these,

05:26

and you can accept this into here. Now, you wouldn't normally do this unless you needed to do something within here. Let's just die dump on book,

05:34

just so we can see that that does come through, and you can see, sure enough, we get the first book here died and dumped out, and you could even then go ahead and assign this

05:43

if you wanted to, if you needed to do this slightly differently. So mount is an option, and you can also use mount to do initial things,

05:51

so you might need to initially set some state within each of your components, and that's probably the most used lifecycle hook. So I'm gonna get rid of that for now,

06:00

we might introduce that a little bit later, we're not gonna overcomplicate things, but we've now moved these out to their individual components.

06:07

Now, let's talk about wire key, because we removed that from the div that we put now into this component. What we do now is we attach that key

06:15

onto the component itself, so we can do exactly the same thing here, and say wire key, book ID, and that's it. So we've now keyed each of these components,

06:25

so Livewire knows how to keep track of them, and we don't run into any problems later on. Finally, I just wanna talk about having one item in your overall templates within Livewire.

06:37

So if, for example, I wanted to create another div out down here with some other content, this isn't actually gonna work.

06:44

Livewire requires that you put everything inside of one element. Even if you're not applying classes to this, just have an empty div,

06:52

which wraps multiple other elements if you need to. So if I come over and now give this a refresh, you can see Livewire only supports one HTML element per component,

07:02

and it's detected that there are multiple components. So if you ever see that error, you just wanna go ahead and make sure you wrap your code inside of one element,

07:11

even if that's just an empty div. Okay, there we go. We've learned quite a lot here. We've learned we can create components

07:17

and iterate over components, so nesting components. We need to apply a key to anything that we iterate in. Really, really important. We know why.

07:27

Hopefully, we've moved this over to its own component because now this book item has its own functionality. So we can delete this book. We can update this book.

07:35

We can do anything with this individual book now. And last of all, really important, we make sure that we only have one root element to all of our Livewire components.

Sign up to access "Learn Livewire" right now.

Episodes

Transcript

Episode summary

Episode discussion