Now, we're about to create a form here and wrap it in a Livewire component. But real quick, notice if I load the page, I hope you can see this in the screencast, but there's a quick flicker of the modal before the JavaScript is rendered and takes effect. It's off-putting. So what we can do is on our modal, always set the display to none. By default, I don't want to see it. However, once Alpine is loaded and this is rendered, it will toggle this automatically. So we don't have to worry about that. So notice before, I see it, just a quick flicker there every time I reload the page. After I add this, I don't see it at all, and that's what we want here.

Yes, we click on that. We want to display a modal then. So we would set the hash here. UserDeleteModal. Let's now start from scratch. Click it. I see the modal. I can cancel out so I don't lose my account. But yeah, again, what exactly should happen when you click that continue button? Tutorials often make that ambiguous.

Think about it. Right down here, here's our modal. When you click on this, how do I communicate back up here to say, okay, now it has been confirmed, proceed? Well, what you could do, and what people often do, is let's give this an ID, deleteUserForm, and then you come down to your modal, and you'd say, okay, well, if you want to continue, let's manually submit the form. So when you click on me, document, and yeah, you'll see this a lot traditionally with jQuery type projects. Find the deleteUserForm, and force submit it.

It works, but again, it gets kind of messy. There's a lot of diving into the DOM and doing things. So in the next episode, let me show you how we might deal with this as part of a Livewire component that wraps a form.