Now whilst it's nice that we have this overlay here
it's not that nice that we can't get rid of it.
I can type something here,
and you see that it gets updated in the background.
But of course it would be great
if we could close this modal somehow.
For example, by clicking on that backdrop
on that transparent black background.
So how could we achieve this behavior?
Well, in the end, again, with help of state.
You could say one state should be that
the modal is visible, and the never state
should be that it's not visible.
And then for example, by clicking on that background
we wanna update the state
and switch it from is visible to is not visible.
And then we wanna display this entire modal
conditionally based on that state.
So it's in the end a three step process:
register and use state,
add an event listener to this backdrop,
and then use that state to show, or not show, this modal.
So to implement this, I'm back here in posts list JSX
and I'll zoom out a bit since the code keeps
on growing.
And there we now don't just wanna manage these two
values that can be submitted or entered
through that form, but I instead now also want to
add an additional state slice here with useState.
And the position does not matter if it's the first
the second, or the last state, this does not matter.
But here the default value should for example, be true
because here I won't manage some text as a state value,
but instead the modal is visible state.
The name is up to you, but you should try
to describe what's controlled by that state.
And here I want to control the modal visibility.
So I'll name it, modal is visible and the
updating function could be called "set modal"
is visible.
And by default here it's true.
So that we start with the mod being visible.
Of course this alone doesn't do much.
We now also need to add some code to change this
if we click on this background here.
Now to achieve this, we can go to the modal
component because here we got that background.
It's this div here.
And there we can add the on click event listener.
Click is another default event.
And on click is there for a prop we can add to set
up a listener to the click event on that div.
And the function that should be executed
should now not be defined here in this modal.
But again, in posts list.
So again, we're lifting the state up.
Here we can add a new function.
Show model handler for example.
Or in our case actually the hide modal handler,
because that's what we want to do
if the backdrop is clicked.
And here we can call set modal is visible
and set it to false as a new state value.
Now we have to pass this function
as a value to the modal component here.
So here we could add a prop called on close.
It's your component.
So to prop them is up to you.
And pass the hide modal handler
as a value to on close, again
without parenthesis, passing the function itself
as a value rather than the return value of that function.
Which is what we would pass
if we would have parentheses here.
So we passed the function itself.
And since I named the prop on close here
in the model component, we can now also restructure this
on close prop here, and set it as a value
to on click.
So that this function, which we receive
on the on close prop is set as a value
for the on click prop.
Hence wiring this click listener up
to this height modal handler function in the end.
Now with that, we have a way of updating the state
but right now we still wouldn't see any effect on the screen
because we're not doing anything with
that modal is visible state.
We're updating it, but we're not using it thereafter.
And that's the last step.
Now we wanna render this modal conditionally.
Based on our state.
So the goal is to only render this piece of code here.
This JSX code, if modal is visible is true.
Now how can we achieve this?
Again, with a dynamic value
so with single curly braces.
But now we don't just wanna output modal is visible.
We don't just wanna output true or false,
but instead we wanna control
what's being shown on the screen.
We could achieve this with a ternary expression.
If that's true.
And for that, we can also just check mod is visible.
We want to output this content.
And indeed you can cut and paste that content here
after the question mark.
And then add a colon here,
since I'm writing a ternary expression
where we also define what should be rendered
if this is false.
And that could be null.
Null is something you can output as part of your JSX code
and it will simply lead to nothing being rendered here.
Alternatively, you could also set this to false
and this would also render nothing.
If I now save this, you see, by default
this is open, which should make sense
because our default state value is true
for modal is visible.
But if I click on this backdrop, it disappears
And it disappears because I set the state
to false.
That's what we do here.
And thanks to this ternary expression,
it's then this L's that becomes active.
And if you output false, or null here,
nothing gets displayed
on the screen in this place in your JSX code.
The other parts, like this list,
are still being output, but this content to be
precise, is now rendered conditionally.
With help of the ternary expression.
Now there are other approaches, as well.
We could, for example, add a variable
modal content and by default set that
to nothing, so to undefined.
And then check if modal is visible is true.
And in that case, set modal content to
this JSX code.
You can store JSX code in variables, as well.
You can not just return it in functions.
You can use it anywhere where a value is wanted.
And then down here in the JSX code we do return,
we could now just refer to modal content.
And this would now either be nothing,
undefined, which also leads to nothing
being output on the screen.
Or it's this content.
Now we are using a variable here,
but we'll see the updated content nonetheless,
because we are using a state value,
which is updated with our State updating function here
in the posts list component.
So this variable will only receive a new value
if the state was updated with that state
updating function and therefore this
component function was executed again.
Hence we'll see the updated JSX snapshot
being reflected on the screen.
So with that code, if I reload the page,
it will still close
if I click on the backdrop.
And one last alternative, which I want to show you,
though this here is a great approach,
since it's also quite readable, is that
you go back here in your JSX code,
and instead of writing a ternary expression
you use the modal is visible,
state value again,
and then the logical and operator here,
to then define the content that should be output.
If modal is visible, is truthy.
So if it's true, in this case.
Due to the way JavaScript works
it will now output this content only
if this value here is truthy, if it's true,
and otherwise it will output nothing.
Or to be precise, it will output the falsey value,
false in this case.
And that, as you learned,
will lead to nothing showing up on the screen.
So here we're using standard JavaScript to render nothing,
or the modal.
So that's another approach of making sure
that we can hide it.
And no matter which approach you prefer,
all three approaches are fine.
But that's how you can render content conditionally.