Well to output this post component
for our different array items
we have to add this dynamic expression here again
because we wanna refer to our post state here.
And now, in the end, we wanna transform our array
of post objects into an array of JSX elements
one post element per post object.
Because if you output an array
of JSX elements in your code,
for example, here are some dummy paragraphs
that will actually be rendered
to the screen, as you can see here.
So you can output an array of JSX elements
in your JSX code with these single quarterly braces.
So therefore, we could output the posts array
but that would be an array
of pure JavaScript objects, not of JSX elements.
But in the end, you must output JSX elements down there.
Therefore, you can call the built-in map method
on this post array.
This method exists on all JavaScript arrays.
And this method takes a function which is executed
by the browser for every item
in this array receiving that item.
And then you return the value to which this item
should be mapped.
So map returns a new array where every item
in that old array was transformed
into a new item into a new value.
And here I wanna transform every post
in my post array to a post JSX element.
That's some code you can write here.
And in the end
this will yield us an array full of JSX elements.
So this function here is executed for every post and posts
and therefore now we just have to set the author here
to "post dot author" and the body to "post dot body".
And we can access dot author and dot body
on the post object in the post array
because the post data object
which we add to this array, comes from
on ad post in the end, since that's the prop
receiving the ad post handler function.
And this comes from new post.
And there it's this post data object we have here
which we pass in the end to ad post handler.
So it's this object
with this structure that's added to the post array.
And here we have a body and an author field.
And therefore here we can access dot author and dot body.
And with that, if we save that, we got no post initially
but I can add a new post like this.
Click submit, and it shows up here.
Just like this.
So that's how you can dynamically output lists of items.
However, if you open the developer tools, you'll notice
that we get a warning here that each list item
should have a unique key prop.
That's a requirement by React
which, in the end, the ensures
that React is able to render and update lists efficiently.
I talk more about that in my complete guide course
in the end, whenever you output a list like this.
So if you map an array to an array of JSX elements
you should add the special key prop to the JSX element
which is not a prop you must accept
or use in your component.
The post component doesn't use any key prop here
but you can still add it to every JSX element
because it's a special built-in prop supported by React.
And this prop should receive a value which is
guaranteed to be unique for every post.
Typically, there should be some unique ID here.
We could use the post body, which
in theory could occur twice for two different posts
but which is good enough for this demo.
And with this key prop added and set to post dot body
you also see that if I reload and test this again
the warning does not show up again.
So that's how we can output a list
of posts with help of this map function
and with help of managing our posts with state.
Now, to finish this first version of this app
I just wanna make sure
that I also show a message if we have no posts yet.
And in the end, that means that in my posts list
component where I output that list of posts
I just have to render this unordered list conditionally
with a dynamic expression where I check
if posts dot length is greater than zero
which means it is in a array that has at least one post.
And if that's the case, I then wanna output that unordered
list using this conditional rendering approach
you learned about before.
And then I add another expression where I check
if posts dot length is equal to zero.
So if I have no posts. And in that case I'll render a div
where I'll just add some quick and dirty inline styles where
I set text align to center with this syntax
and color to white.
And inside of that div then h-2 element where I say
there are no posts yet.
And below that a paragraph where we could say
start adding some like this.
Text online is written like this instead
of text dash online because this would be an
invalid Javascript property name.
Therefore you have to use camel case notation.
And with that, we now got this fallback text
but as soon as I add a new post,
this disappears and my list of posts
shows up instead.
Like that.
So that's working.
And with that, we now learned about a lot of key concepts
that you must know if you wanna work with React
but it's not all we can do with React.
Instead, it's now time to dive into more advanced features.