Modals in Inertia

Sign in Get started

This episode is for members only

Sign up to access "Modals in Inertia" right now.

Already a member? Sign in to continue

Playing

08. Passing props to modals

Episodes

0%

Your progress

Total: 46m
Played: 0m
Remaining: 46m

Join or sign in to track your progress

01. Introduction and demo

02. Setting up and triggering our first modal

03. The modal container

04. Three ways to close a modal

05. Customising individual modal containers

06. Redirecting on close

07. A practical example with a form

08. Passing props to modals

09. Programmatically closing a modal

10. Modal flow examples

Transcript

00:00

So we can pass props down to modals exactly like we would do with normal inertia pages, because this package pretty much behaves like we're working with an inertia page. So let's look at an example of when we click on a note, we show a modal with a little bit more information about that note. So that's a pretty common thing that you would do.

00:19

So we'll go ahead and build out the modal first of all. So let's start with our controller. So phpArtisan makeController, under notes, we'll say note showController. And let's go over to our note showController and just start to fill this in. So let's invoke this. Let's return using our inertia helper.

00:39

Using modal, we know where this is going to go. It's going to be notes and show. And then we'll set a base route for this, which is just going to be our notes page. Pretty straightforward. So into this, we're going to need to pass a note in, and then we're going to need to get that data into our notes show component.

00:57

So let's register our route, and then we'll just start to pull all of this together. So let's go and create out a get route for notes slash, and then note using route model binding, note showController, and we'll call this notes and show. Great. OK, so let's head over to create out our modal for this.

01:16

So under modal notes, we'll pretty much just take create because it has everything that we need. So let's create show.view, paste that in. Of course, we don't need a form. We're just going to be dumping this note out on the page. But of course, you can style this up and show what you need.

01:33

And there we go. So this is going to be more information about that note. So we've got the component. So we can link this up now to each of these notes. Let's head over to the notes index. And for each of these notes, let's go ahead and make these a link that we can click through to.

01:50

So let's just fix that up. And the href here is going to be the route notes show. And we're going to pass the note into that. Great. So we should now be able to click on this and trigger a modal that shows more information about each of the notes. But how do we get this data into this via a prop?

02:10

Well, if we head over to our note showController, what we can do is take the note in now with route model binding. And then down here, what we can do is chain on with. And this works in exactly the way that you would expect, the way that you would normally pass data down. It's just an array of any data.

02:29

So in our case, that is going to be the note itself, like so. So this is now going to be available as a prop for any of the modal components that we use. Well, in this case, it will be just this one. But if you did this anywhere else, it would work the same. So let's go over to our

02:47

showModal. And let's go ahead and define our props out here. And we have a note in here, which we know is going to be an object. And then we can just do something with it in here. So I can just dump the note out just as an example. And that's it. So let's go over and click on any of these.

03:04

There we go. We get the information about that, which we can start to extract from and show information about. And the same for this one as well. And it just shows the details that we need. So very, very simple to pass props down to our modals. And we do that using the with method chained on.

10 episodes• 46 mins•10 months ago

Overview

Effortlessly add modals to your Inertia applications with the momentum-modal package.

In this course, we’ll get modals set up, design a customisable modal container with transitions, then cover everything you need to know about working with modals in your Inertia applications.

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.