Sign up to access "Learn Livewire" right now.

Remember, a little bit earlier, we moved each of these book items over to their own component, and this is why. So in this episode, we're going to look at toggling the form

within each of these components. This wouldn't be possible if each of these books that we're rendering out wasn't its own component. So if we head over to our book item, which

is each of them book components that we're passing down, we can go ahead and create our variable in here, which toggles the book editing status. So let's start by creating out a Boolean in here called editing.

And by default, that's going to be false, because we don't want our form to show to edit a book every single time. So what we can now do is inside of our book item component,

we can create a little if statement in here. So let's do this directly within here, and we're going to say if editing, and we'll go ahead and end that if show edit form.

So obviously at the moment, we don't see this text because this value is set to false, but once it does show true, this will be re-rendered, and it will show this text and, of course,

show the form eventually. So let's go down here and create out a list of buttons that we can use to toggle this state. So let's bring in a list item here.

And inside of here, we're going to add in a button, and this is going to be to edit this. So let's just style this up pretty quickly. We'll just set the text to blue in this case,

and then for this unordered list, let's set this to a flex with item center, and we'll give each of these items a bit of spacing. So we now have these buttons just down here.

And we can even go and wrap these, and then go ahead and add in a space Y of say four just to separate them out. So when we click on edit,

we want to easily toggle this value. Now, there's a couple of ways that we can do that. We've already seen that we could create a method to toggle this.

So for example, I could say toggle edit, and in here, I could take in a value. So we can actually pass values through when we invoke methods directly

from our Livewire components. So in here, I could say toggle, and I could set this editing to that toggle value. So we could pass true or false into here.

Let's take a look at what that looks like first of all, because there's going to be a time when you want to pass stuff through to the methods that you call within your Livewire components.

So we could go over to our book item, and we already know how to hook up this button with wire click, and we can invoke that, but what we've not seen yet

is that we can pass a value through into here. So I could pass true into here if I wanted to. So let's go over and have a look, hit edit, and sure enough, that toggles,

and then we could create one that hides it if we wanted to, whatever we want to do. So there's a ton of different ways that you could do this, or you could set this to the opposite of editing,

and you could get rid of the toggle, and all that would do is literally toggle it. So you could not pass this through, and then when we click on that, it shows it,

and when we click it again, it sets it to the opposite, which of course just hides it. So lots of different ways that you can do this, but an easier way to do this is a built-in method

to toggle a Boolean value. So we could just get rid of that method altogether. We don't really need it in there, and inside of our wire click, we can use toggle.

Now, we know the value of that is editing, or the name of the property is editing, so we can just pass the name of the property through in a string, and that will just toggle

that between the true and false values. So we basically get the same functionality that we just built with a method, but using this inbuilt helper,

and LiveWire has a load of these. So as you come across the documentation, you'll find these listed out there. So you can see, sure enough, that does toggle that form.

Of course, it's not a form at the moment, but we are gonna make this into a form. So these things are called magic actions, and like I said, there are a ton of these that you can use.

So once you have read through the documentation, you'll find loads of different helpers like this. It doesn't matter if you do implement a method to toggle this,

there's nothing wrong with doing that at all. But as you start to tidy up your code and find more efficient ways to write stuff, stuff like this is really, really helpful.