Are modal component is looking pretty good.
There's just one little issue with it.
If we open up the modal again here's the modal.
You'll notice that we've got the hard coded text inside of year of delete stream.
We also have some hard coded content and some hard coded buttons inside of the div with the class of
actions.
In addition any time that the user clicks outside of the modal we always redirect the user back to the
root route of our application.
Now it's incredibly likely that we might eventually want to reuse this Modal component at some point
in the future.
It would be really hard to use because we've got all this hard coded text.
So in this video I want to make sure that we don't have any hard coded text inside of your.
We don't have any hard coded actions when user clicks outside of the modem.
Instead we should configure the modal based upon some props that get passed into it from the parent
component.
So that would make our motile much more reusable if we ever want to use it again in the future.
So to get started I'm going to flip on over to my stream delete component.
Here's where we create an instance of the modal.
So to this thing I'm going to pass in a couple of props that will be used to customize how the modal
looks and behaves.
First off I'm going to pass in a prop of title and I'll give it some text like delete stream.
So now inside of our modal jazz file rather than have having some hard coded title right here or Hetter
for it we can instead reference props title like so.
So we're going to take the title property of the proper subject and show it inside of the header.
Now let's say both these files really quickly flip back over to the browser and we'll see.
Yep we can now customize it from the parent component.
Let's now repeat that process for the content and the actions down here as well.
All right so in addition to the title on the motile I'm also going to pass in some content.
I'll make this a string.
I'll say something like Are you sure you want to delete this stream.
We can also do some actions as well.
So the actions right here needs to be some buttons that will appear inside of the actions div..
Now this one's going to be a little bit more challenging in the case of title and content.
We were able to just pass in some strings but this time we actually want to pass in some GSX elements
like the two buttons that you see right here.
So up above stream delete or see the return statement inside of stream delete.
I'm going to make a new variable called actions.
I'm going to place a set of parentheses and then inside there I'm going to place a little bit of GSX
to render those two buttons that I want to show.
So right now I'll do a div that contains a button with the class name of UI button negative we're going
to change up the class names here just a little bit compared to what we had before the negative right.
We're just going to get the button to appear as read and make it really clear that this is kind of like
a dangerous changing action kind of thing going on they'll give that button the text delete and then
after that I'll put another button with you button as a class name.
And again I'll give you that the text cancel.
So now we've got this little fragment so to speak of GSX right here we can pass that fragment of GSX
as a prop down on actions.
So say actions equals curly braces actions.
All right so now we can save this we can flip back over to our motile and now we can refactor our content
right here.
So instead of having that hard coded text we can reference prop's dot content and inside the actions
div rather than having the hardcoded buttons inside of your I can reference props dot actions as well.
Now let's save this and we'll flip back over to the browser and see how it looks.
All right.
So pretty similar to what we had before just one issue here.
Notice how the buttons are a little bit placed against the bottom of the motile that really does not
look good at all.
So why are we seeing that.
Well let me show you something really quickly here.
I'm going to make a little bit of a change to my stream delete component.
I encourage you to not make this change.
Just take a look at what I'm going to do rather than returning a div that contains the two buttons.
I'm going to return just one button by itself so I'm going to sleep rather than commenting that stuff
out him's going to delete those other GSX elements really quickly.
All right so now actions has a single button element.
I'm not going to save this.
Flip back over and you'll see that the button appears correctly and it's not sandwiched up against the
bottom of the motile So this is kind of an interesting problem.
When we have that extra div inside of our class of actions right here inside of motile when we have
an extra div inside their semantic UI does not quite style the model correctly.
However we always have to have a div or some element wrapping these multiple elements if we want to
get them to show up correctly.
In other words we can't just take like these two GSX elements and tried to assign them like so to the
actions variable.
In this case these are two separate function calls.
Remember what happens when you're GSX gets transpired by Babel so we can't just take two function calls
inside of a set of prints and pass them off to actions or assign them to actions.
That's not valid javascript syntax and that's why we had the div inside there so that we only assigned
one root element to the actions variable.
But as we just saw when we do so would we have this div right here.
Our styling gets thrown off so as a little work around.
Let's take a quick pause and the next video will talk about how we're going to use a little work around
to avoid running into this styling issue.
We're inserting this extra day right here.
Throws off our styling so quick Pozen I'll see you in just a minute.