1
00:00:02,000 --> 00:00:05,000
Well to output this post component

2
00:00:05,000 --> 00:00:07,000
for our different array items

3
00:00:07,000 --> 00:00:11,000
we have to add this dynamic expression here again

4
00:00:11,000 --> 00:00:14,000
because we wanna refer to our post state here.

5
00:00:14,000 --> 00:00:19,000
And now, in the end, we wanna transform our array

6
00:00:19,000 --> 00:00:24,000
of post objects into an array of JSX elements

7
00:00:24,000 --> 00:00:27,000
one post element per post object.

8
00:00:28,000 --> 00:00:30,000
Because if you output an array

9
00:00:30,000 --> 00:00:34,000
of JSX elements in your code,

10
00:00:34,000 --> 00:00:38,000
for example, here are some dummy paragraphs

11
00:00:39,000 --> 00:00:41,000
that will actually be rendered

12
00:00:41,000 --> 00:00:43,000
to the screen, as you can see here.

13
00:00:44,000 --> 00:00:48,000
So you can output an array of JSX elements

14
00:00:48,000 --> 00:00:51,000
in your JSX code with these single quarterly braces.

15
00:00:52,000 --> 00:00:55,000
So therefore, we could output the posts array

16
00:00:55,000 --> 00:00:56,000
but that would be an array

17
00:00:56,000 --> 00:01:01,000
of pure JavaScript objects, not of JSX elements.

18
00:01:01,000 --> 00:01:05,000
But in the end, you must output JSX elements down there.

19
00:01:05,000 --> 00:01:09,000
Therefore, you can call the built-in map method

20
00:01:09,000 --> 00:01:11,000
on this post array.

21
00:01:11,000 --> 00:01:14,000
This method exists on all JavaScript arrays.

22
00:01:14,000 --> 00:01:17,000
And this method takes a function which is executed

23
00:01:17,000 --> 00:01:19,000
by the browser for every item

24
00:01:19,000 --> 00:01:23,000
in this array receiving that item.

25
00:01:23,000 --> 00:01:27,000
And then you return the value to which this item

26
00:01:27,000 --> 00:01:27,000
should be mapped.

27
00:01:27,000 --> 00:01:31,000
So map returns a new array where every item

28
00:01:31,000 --> 00:01:34,000
in that old array was transformed

29
00:01:34,000 --> 00:01:36,000
into a new item into a new value.

30
00:01:37,000 --> 00:01:39,000
And here I wanna transform every post

31
00:01:39,000 --> 00:01:44,000
in my post array to a post JSX element.

32
00:01:44,000 --> 00:01:45,000
That's some code you can write here.

33
00:01:45,000 --> 00:01:46,000
And in the end

34
00:01:46,000 --> 00:01:50,000
this will yield us an array full of JSX elements.

35
00:01:51,000 --> 00:01:54,000
So this function here is executed for every post and posts

36
00:01:54,000 --> 00:01:58,000
and therefore now we just have to set the author here

37
00:01:58,000 --> 00:02:03,000
to "post dot author" and the body to "post dot body".

38
00:02:08,000 --> 00:02:11,000
And we can access dot author and dot body

39
00:02:11,000 --> 00:02:14,000
on the post object in the post array

40
00:02:14,000 --> 00:02:16,000
because the post data object

41
00:02:16,000 --> 00:02:19,000
which we add to this array, comes from

42
00:02:19,000 --> 00:02:22,000
on ad post in the end, since that's the prop

43
00:02:22,000 --> 00:02:24,000
receiving the ad post handler function.

44
00:02:24,000 --> 00:02:26,000
And this comes from new post.

45
00:02:26,000 --> 00:02:30,000
And there it's this post data object we have here

46
00:02:30,000 --> 00:02:34,000
which we pass in the end to ad post handler.

47
00:02:35,000 --> 00:02:36,000
So it's this object

48
00:02:36,000 --> 00:02:40,000
with this structure that's added to the post array.

49
00:02:40,000 --> 00:02:43,000
And here we have a body and an author field.

50
00:02:43,000 --> 00:02:46,000
And therefore here we can access dot author and dot body.

51
00:02:49,000 --> 00:02:53,000
And with that, if we save that, we got no post initially

52
00:02:54,000 --> 00:02:57,000
but I can add a new post like this.

53
00:02:57,000 --> 00:02:59,000
Click submit, and it shows up here.

54
00:03:03,000 --> 00:03:04,000
Just like this.

55
00:03:05,000 --> 00:03:08,000
So that's how you can dynamically output lists of items.

56
00:03:09,000 --> 00:03:13,000
However, if you open the developer tools, you'll notice

57
00:03:13,000 --> 00:03:16,000
that we get a warning here that each list item

58
00:03:16,000 --> 00:03:18,000
should have a unique key prop.

59
00:03:20,000 --> 00:03:22,000
That's a requirement by React

60
00:03:22,000 --> 00:03:23,000
which, in the end, the ensures

61
00:03:23,000 --> 00:03:28,000
that React is able to render and update lists efficiently.

62
00:03:29,000 --> 00:03:31,000
I talk more about that in my complete guide course

63
00:03:31,000 --> 00:03:34,000
in the end, whenever you output a list like this.

64
00:03:34,000 --> 00:03:38,000
So if you map an array to an array of JSX elements

65
00:03:38,000 --> 00:03:41,000
you should add the special key prop to the JSX element

66
00:03:41,000 --> 00:03:44,000
which is not a prop you must accept

67
00:03:44,000 --> 00:03:46,000
or use in your component.

68
00:03:46,000 --> 00:03:50,000
The post component doesn't use any key prop here

69
00:03:50,000 --> 00:03:53,000
but you can still add it to every JSX element

70
00:03:53,000 --> 00:03:57,000
because it's a special built-in prop supported by React.

71
00:03:57,000 --> 00:03:59,000
And this prop should receive a value which is

72
00:03:59,000 --> 00:04:02,000
guaranteed to be unique for every post.

73
00:04:02,000 --> 00:04:05,000
Typically, there should be some unique ID here.

74
00:04:05,000 --> 00:04:07,000
We could use the post body, which

75
00:04:07,000 --> 00:04:11,000
in theory could occur twice for two different posts

76
00:04:11,000 --> 00:04:14,000
but which is good enough for this demo.

77
00:04:14,000 --> 00:04:19,000
And with this key prop added and set to post dot body

78
00:04:19,000 --> 00:04:23,000
you also see that if I reload and test this again

79
00:04:23,000 --> 00:04:26,000
the warning does not show up again.

80
00:04:26,000 --> 00:04:28,000
So that's how we can output a list

81
00:04:28,000 --> 00:04:31,000
of posts with help of this map function

82
00:04:31,000 --> 00:04:35,000
and with help of managing our posts with state.

83
00:04:35,000 --> 00:04:38,000
Now, to finish this first version of this app

84
00:04:38,000 --> 00:04:39,000
I just wanna make sure

85
00:04:39,000 --> 00:04:42,000
that I also show a message if we have no posts yet.

86
00:04:42,000 --> 00:04:47,000
And in the end, that means that in my posts list

87
00:04:48,000 --> 00:04:51,000
component where I output that list of posts

88
00:04:51,000 --> 00:04:55,000
I just have to render this unordered list conditionally

89
00:04:55,000 --> 00:04:58,000
with a dynamic expression where I check

90
00:04:58,000 --> 00:05:01,000
if posts dot length is greater than zero

91
00:05:01,000 --> 00:05:05,000
which means it is in a array that has at least one post.

92
00:05:05,000 --> 00:05:09,000
And if that's the case, I then wanna output that unordered

93
00:05:09,000 --> 00:05:12,000
list using this conditional rendering approach

94
00:05:12,000 --> 00:05:13,000
you learned about before.

95
00:05:14,000 --> 00:05:17,000
And then I add another expression where I check

96
00:05:17,000 --> 00:05:20,000
if posts dot length is equal to zero.

97
00:05:20,000 --> 00:05:24,000
So if I have no posts. And in that case I'll render a div

98
00:05:24,000 --> 00:05:29,000
where I'll just add some quick and dirty inline styles where

99
00:05:29,000 --> 00:05:33,000
I set text align to center with this syntax

100
00:05:33,000 --> 00:05:35,000
and color to white.

101
00:05:36,000 --> 00:05:41,000
And inside of that div then h-2 element where I say

102
00:05:42,000 --> 00:05:44,000
there are no posts yet.

103
00:05:44,000 --> 00:05:47,000
And below that a paragraph where we could say

104
00:05:47,000 --> 00:05:50,000
start adding some like this.

105
00:05:51,000 --> 00:05:53,000
Text online is written like this instead

106
00:05:53,000 --> 00:05:56,000
of text dash online because this would be an

107
00:05:56,000 --> 00:05:58,000
invalid Javascript property name.

108
00:05:58,000 --> 00:06:01,000
Therefore you have to use camel case notation.

109
00:06:02,000 --> 00:06:05,000
And with that, we now got this fallback text

110
00:06:05,000 --> 00:06:09,000
but as soon as I add a new post,

111
00:06:12,000 --> 00:06:15,000
this disappears and my list of posts

112
00:06:15,000 --> 00:06:16,000
shows up instead.

113
00:06:21,000 --> 00:06:21,000
Like that.

114
00:06:21,000 --> 00:06:23,000
So that's working.

115
00:06:23,000 --> 00:06:26,000
And with that, we now learned about a lot of key concepts

116
00:06:26,000 --> 00:06:29,000
that you must know if you wanna work with React

117
00:06:29,000 --> 00:06:33,000
but it's not all we can do with React.

118
00:06:33,000 --> 00:06:36,000
Instead, it's now time to dive into more advanced features.