Learn Livewire
This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
13. Using a magic action to toggle edit state

Episodes

0%
Your progress
  • Total: 2h 52m
  • Played: 0m
  • Remaining: 2h 52m
Join or sign in to track your progress

Transcript

00:00
So over the next few episodes, we're going to look at editing a book.
00:03
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
00:14
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
00:24
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.
00:38
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,
00:50
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.
01:02
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,
01:10
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.
01:20
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,
01:31
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.
01:41
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,
01:53
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.
02:02
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
02:14
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.
02:26
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.
02:36
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
02:46
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,
02:56
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,
03:08
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,
03:16
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
03:26
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.
03:38
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
03:47
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,
03:53
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.
04:02
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.
04:11
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,
04:19
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.

Episode summary

In this episode, we're diving into how to edit a book item in our app, focusing specifically on how to toggle its edit state. Remember earlier when we moved each book into its own component? This is exactly why—that way, we can have independent edit states for each book!

Here's what we do: we set up a Boolean property called editing inside our book component and use it to show or hide the edit form. We look at a couple of ways to toggle this property, either by writing our own method or by using Livewire's built-in 'magic action'—the toggle helper. We explore both approaches, showing you how to pass values to methods if needed, but then reveal the much simpler built-in way—just call toggle('editing') in your button's click handler and Livewire takes care of the rest!

This approach keeps your components nice and clean. We round off by talking about how these magic actions make Livewire more efficient and your code tidier, though if you prefer writing your own method, that's totally fine too. You'll also hear about some other handy magic actions you can discover in the documentation. Next up, we'll actually wire up the edit form itself!

Episode discussion

No comments, yet. Be the first!