So we're gathering that post data.
How can we now add that as a post to a list
of posts that should then be output dynamically here instead
of outputting this hard coded post here?
Well, in the end, again, by using what we already know,
plus two new concepts or features.
In the end we have to get this post data
from the new post component to the post's list component.
And there we then should manage some state which
in the end manages a list of posts.
And whenever that list changes we wanna update the list
for outputting down there.
Therefore, we can useState here and import useState
from React in the post list component
and pass an MT array as an initial value.
And that then should be our posts array
with a setPosts state updating function.
So the idea is that here we manage a list
of posts and that list should be edited
whenever we submit a new post.
So therefore, we also must add a function here
in posts list, which adds a new post.
And that could be the addPostHandler function
and I name it addPostHandler, because in the end,
again it should be triggered whenever the form is submitted
in the end.
Now here we could expect to get some postData
and then we wanna update our post state with set posts here
and in the end, pass a new post object to this array.
Now for that, what we could do is pass a new array
as a new state value to set posts and then add post data
as a new value to that array and to make sure
that any potentially existing posts aren't lost.
We could use this spread operator, a default operator built
into JavaScript to spread our existing posts
into this new array of posts so
that we add this new post as the first element
in this array and the existing posts come thereafter.
This is not optimal, but it will work.
So now we just have to make sure
that the addPostHandler is executed
as the form is submitted.
For that, we can pass this addPostHandler function
with help of a prop to the new post component.
So we could add a prop called onAddPost and set the value
of that prop to the addPostHandler function we just added.
And in that the new post component,
we can now use the onAddPost prop,
again using the same mechanism we've used over
and over again to accept that prop here
and destructure it from this props object
and in submit handler before calling on cancel,
we can now call on at post.
Since this again is a prop yielding a function
and passing the post data
to this function and this function that is executed
in the end is this addPostHandler function.
So this will now add this post to this array of posts.
But as I mentioned, this code here isn't ideal
because there is a rule if you update state and
that new state is based on that previous state value
as it's the case here where the new state is based
on the existing posts you should actually pass a function
to set posts for example, an arrow function.
And this function here will be called automatically
by React whenever you call set posts.
And this function will automatically
receive the current state snapshot, so the existing posts
and you should then return the new state value
where you could, for example,
again add your post data and spread the existing posts.
Now this looks very similar to what we had before
but it's the technically better way of updating your state
if it depends on the previous state snapshot.
The reason for data is that internally React does actually
not execute your state updating functions instantly.
At least it's not guaranteed that it will do so.
But it schedules those state updates and
in case you have multiple state updates after each other,
you could potentially update your state based
on some old state or anything like that.
And therefore, this way is a way
of making sure that React ensures
that you get the latest correct state
for this state update even
if you have multiple pending state updates.
So therefore, it's this simple rule.
If the new state depends on the old state,
then you should use this function form
for updating the state.
You get the old state automatically, you can use it
and you should return the new state then as a value.
And you can use the old state if you need to
as it's the case here.
And this does not just apply if your state is an array
but whenever your new state depends on the old state.
And with that, we're managing this list of posts.
How can we now output it down there
and render one post component per post item in this array?