1
00:00:02,070 --> 00:00:08,280
How can we output an array of data as jsx elements?

2
00:00:08,280 --> 00:00:10,740
Well actually it's relatively trivial,

3
00:00:10,740 --> 00:00:19,020
we will map this array of Javascript objects to an array of jsx elements because React is capable

4
00:00:19,350 --> 00:00:22,770
of outputting an array of Javascript elements. For that,

5
00:00:22,770 --> 00:00:23,760
let me show you how this works,

6
00:00:23,760 --> 00:00:29,240
let's use these single curly braces because I want to add a Javascript expression here and my expression

7
00:00:29,240 --> 00:00:33,310
here is a simple array but an array of list items;

8
00:00:33,310 --> 00:00:36,530
Hi and that then another one,

9
00:00:36,950 --> 00:00:38,720
this works.

10
00:00:38,720 --> 00:00:42,950
I output this in my jsx code with the single curly braces

11
00:00:42,960 --> 00:00:49,780
because this here of course is not jsx, it's an array but it's an array full of jsx and if I save

12
00:00:49,780 --> 00:00:56,180
this, it outputs hi and this works. We get an error or a warning which you can ignore for now but this works

13
00:00:56,180 --> 00:01:04,040
in general. Now since this works with hardcoded data, we can also output our array of goals, so we can

14
00:01:04,070 --> 00:01:05,840
output props goals here

15
00:01:05,840 --> 00:01:12,700
but the problem is that props goals is in the end an array of Javascript objects, not an array of jsx

16
00:01:12,770 --> 00:01:13,840
code.

17
00:01:13,850 --> 00:01:17,540
So we try to output this here, it will fail,

18
00:01:17,540 --> 00:01:22,710
it tells you that objects are not valid as React child or as React children.

19
00:01:22,760 --> 00:01:28,620
So in the end we can't output plain vanilla Javascript objects in jsx,

20
00:01:28,730 --> 00:01:37,530
instead we need to map every object into a jsx equivalent, so into a renderable element.

21
00:01:37,550 --> 00:01:41,940
So here we want to map every object into a list item in the end.

22
00:01:42,050 --> 00:01:46,510
So on props goals which is an array, we can call the map method,

23
00:01:46,550 --> 00:01:50,720
that's a default vanilla Javascript method that exists on any array.

24
00:01:50,810 --> 00:01:53,860
The map method takes a function,

25
00:01:54,110 --> 00:02:01,520
here I'll pass in an arrow function which is executed on every element of the array you call map on and

26
00:02:01,520 --> 00:02:08,210
then this function here will return a transformed version of that element in the original array and

27
00:02:08,240 --> 00:02:15,140
overall map will then return a new array full of these transformed data pieces. So this function will therefore

28
00:02:15,160 --> 00:02:17,880
receive the existing element here,

29
00:02:17,900 --> 00:02:23,150
so every goal in our goals array and then returns a new element.

30
00:02:23,150 --> 00:02:28,090
So in this new array returned by map, I want to have a bunch of jsx elements,

31
00:02:28,100 --> 00:02:37,340
so here I will just return a list item which is jsx of course and in that list item, I want to output

32
00:02:37,340 --> 00:02:38,440
my goal text.

33
00:02:38,450 --> 00:02:44,270
Now goal here is that Javascript object we have in the original array because this function runs on

34
00:02:44,270 --> 00:02:49,150
every element in the original array and gives you the object in the original array or the data piece

35
00:02:49,160 --> 00:02:51,590
in the original array as an argument,

36
00:02:51,590 --> 00:02:57,920
so goal here is that object which looks like this here. So I'm only interested in the text here

37
00:02:57,920 --> 00:03:02,320
and again, we can output the text by outputting a Javascript expression here,

38
00:03:02,330 --> 00:03:09,820
hence we need to curly braces in our jsx code here and we have goal.text here, my expression is

39
00:03:09,820 --> 00:03:13,540
that I access the text property on the goal object.

40
00:03:13,540 --> 00:03:21,250
So now what happens here is I map my array of plain Javascript objects to an array of jsx elements

41
00:03:21,490 --> 00:03:27,720
and such an array of jsx elements is renderable as you learned.

42
00:03:27,800 --> 00:03:33,770
So now if I save this, you see this outputs my course goals again.

43
00:03:33,810 --> 00:03:40,240
Now we also get a warning regarding a unique key, that is related to how React re-renders the DOM and

44
00:03:40,290 --> 00:03:42,430
that it wants to do this efficiently,

45
00:03:42,450 --> 00:03:47,310
you learned more about that in my React - The Complete Guide course and therefore whenever you output lists

46
00:03:47,310 --> 00:03:54,620
of data with this technique, you have to add a special prop to every item you are rendering in that list,

47
00:03:54,630 --> 00:03:56,220
in this case to every list item

48
00:03:56,400 --> 00:04:00,660
and that's the key prop. That is a proper React itself understands

49
00:04:00,690 --> 00:04:03,220
and here I want to output goal ID, again

50
00:04:03,270 --> 00:04:08,250
wrapped in curly braces because this is a regular Javascript expression.

51
00:04:08,350 --> 00:04:12,110
So now with that, we don't get the warning and we get our course goals,

52
00:04:12,130 --> 00:04:16,990
so this is how we output a list of data. With that,

53
00:04:17,000 --> 00:04:18,680
this is looking pretty good,

54
00:04:18,680 --> 00:04:20,180
we're outputting our list of data.

55
00:04:20,300 --> 00:04:26,300
Why don't we now work on adding some functionality that allows us to add our own goals?

56
00:04:26,300 --> 00:04:27,920
That would be a nice next step.