So at this point we can close the modal
if we click the backdrop, but we can't open it again.
Now to open it again
I wanna add a header component above my list here
which gives me a button that allows me to open this modal.
Now I prepared such a component in advance since it
won't include any new features we haven't learned about yet.
Attached you find a mainheader.jsx file
and a link to the MainHeader.module.css file.
And the MainHeader.jsx file simply defines a
main header function where I got some JSX code.
Now one noteworthy new thing is in there though.
I'm importing some icon components
from a third party library.
And at the moment this library isn't downloaded
into this project here.
To make sure these icons are available here
and this import command here works,
you should quit your development server
by pressing control+C and you should then run
npm install react-icons to install this react icons library
into this project.
This makes it available as part of your code base
and importing these icon components will then work
and thereafter you can run npm run dev again to bring
up that development server again, which you must have
up and running as long as you are working on your code.
So with that we got that main header component
and now this main header component should be rendered
above this post's list.
For that I'll actually go into the App.jsx file and
in there I'll import MainHeader from components/MainHeader
and then return a fragment which wraps this main section
and PostsList
and render the main header here above the main section.
With that, we got this main header here
but this button of course doesn't work yet.
To make it work, this button now also needs
to set this state that shows or hides the modal.
The modal is visible state
however that state is in the PostsList component.
But you learned how this problem can be fixed.
You can lift the state up, we can cut this state
from PostsList and move it into the app component.
And there we then also must import useState
from react to make that useState hook available there.
We then also must cut the HideModalHandler function
and move that to app and also already add a new function
called showModalHandler, which does the opposite
of HideModalHandler.
It simply sets modalIsVisible to true again.
And now we just need to make sure that the information
whether the modal should be visible
or not is available in the PostsList component.
Now to make it available there, we can use props again
we can add a new prop, isPosting could be the name.
You could also stick to modalIsVisible alternatively
but here I'll use isPosting as a prop name
and that should be true or false
and I'll use it down there in my conditional rendering code.
So if this is true, the modal should be displayed
because if I am posting, I'm working on a new post.
So then this form should be displayed and if it's false
it should not be displayed.
And in the app component we can now set this new
isPosting prop on PostsList.
And simply forward our modalIsVisible value.
So set the value of this state as a value for this prop.
And with that we're passing the information
whether the modal should be visible or not to PostsList.
Of course now we also must make sure
that we can talk into the opposite direction.
So if the modal is closed
we wanna trigger hideModalHandler.
If the backdrop is clicked, for example
and in the main header, if the button is clicked
I wanna show the modal again.
Now here in MainHeader,
I already do expect to get a onCreatePost prop
which I forward to onClick on that button.
So here I want to have a pointer
at that function that should make the modal visible.
So therefore back in App.jsx
we can add the onCreatePost prop to MainHeader.
We can set that prop
and set it to showModalHandler.
So that this function so that this function is passed
as a value to onCreatePost.
And on the PostsList component, we could add another
prop called onStopPosting and here pass
the hideModalHandler function as a value.
Now we just have to make sure that we use this
onStopPosting function in PostsList and therefore there
again we can accept it as a new prop.
And then here for modal for the onClose prop
we now pass the onStopPosting value to the modal component
so that in the end the onClose prop of the modal component
receives this hideModalHandler function.
And passing these different functions across multiple levels
of components and passing these different state values
around of course can be confusing at first.
So therefore it's just important to keep in mind that
in the end we're just passing values around so that
in the different components we can use exactly
the values that should be used there.
By the way, the fact
that my custom props here that take functions
as values like onCreatePost are called
onCreatePost is just a convention I'm following.
I could also just name it createPost
and update the name here in MainHeader of course
and that would work as well.
However, it's a common convention to start
with on in your prop name.
If that prop is receiving a function as a value to
in the end make it clear that this prop won't work
with any other value, and in the end will typically
link that function that is received
as a value to some event listener further down
in your JSX component code.
However, now with all these changes made
if you save all your code
we can close that modal and we can also open it again.
So that's now working and therefore now back in App.jsx
we can also also switch the default
for modal is visible from true to false to make sure
that initially if we reload this page, no modal is visible
but if you click that post we see it
and then there we can still add it
and add our text as we need to and update this first post.
And therefore that's yet another huge step forward
with more state passing across different components.
And with that, we're now ready to dive even deeper
into React and make sure
that we're now not just updating this first post here
but that instead we can really submit that form.
And once we do so, we actually edit this list of posts
so that we finally can start adding new posts instead
of just editing the first one.