1
00:00:02,160 --> 00:00:08,820
Now to output our list of goals, here in the view, I want to simply output a couple of text components

2
00:00:08,820 --> 00:00:16,290
for now where I simply print my goal and to do that, we can enter a dynamic expression here with single

3
00:00:16,290 --> 00:00:17,910
opening and closing curly braces

4
00:00:18,390 --> 00:00:25,860
and now we refer to course goals, which is this variable we got here with array destructuring. Course

5
00:00:25,860 --> 00:00:27,890
goals is our array of goals

6
00:00:28,110 --> 00:00:34,620
and now just as in normal React which is a differentiation I don't really like because we are using

7
00:00:34,800 --> 00:00:36,350
normal React here in the end,

8
00:00:36,750 --> 00:00:43,590
so just like you know it from React for web projects, you can now map this array of data into an array

9
00:00:43,590 --> 00:00:50,280
of components with the map method which is a normal Javascript method. The map method takes a function

10
00:00:50,280 --> 00:00:52,230
which executes on every item

11
00:00:52,230 --> 00:00:53,180
in the array,

12
00:00:53,190 --> 00:01:00,810
so here we get our goal and it then has to return a new component here. Again I'll use this inline arrow

13
00:01:00,810 --> 00:01:07,230
function syntax where instead of having curly braces and then returning something, I omit the curly

14
00:01:07,230 --> 00:01:11,340
braces and I omit the return statement, this is valid Javascript syntax,

15
00:01:11,370 --> 00:01:13,980
this will also return whatever I enter here.

16
00:01:14,160 --> 00:01:17,740
What I want to return is a text component,

17
00:01:17,880 --> 00:01:26,430
so this text component we imported from React Native and with this, we can now output our goal here because

18
00:01:26,430 --> 00:01:32,280
a goal in course goals will just be a text because what we add to course goals is the entered goal and

19
00:01:32,280 --> 00:01:36,100
the entered goal is what we get from text input and that's just text.

20
00:01:36,570 --> 00:01:42,210
So here, we're now just outputting some text and I'm mapping all my course goals into text components

21
00:01:42,390 --> 00:01:49,630
which will be output in this view here. And with that if we save this, we should already be able to start

22
00:01:49,720 --> 00:01:51,130
adding some goals,

23
00:01:51,220 --> 00:01:59,260
so learn React Native is one thing I can enter here, hit add and here it is, learn it for real and we get

24
00:01:59,260 --> 00:02:00,950
this as well

25
00:02:01,050 --> 00:02:06,300
and if you also want to make some pancakes, you can do that as well and of course, this also works

26
00:02:06,300 --> 00:02:11,610
on iOS, learn React Native for real

27
00:02:11,980 --> 00:02:18,480
and of course, I still want to make some pancakes.

28
00:02:18,550 --> 00:02:23,960
So this is working and this is how we can output a simple, a very trivial list of items here.

29
00:02:23,980 --> 00:02:29,830
Now of course, these items look rather boring though, so maybe we can apply some styling there to make

30
00:02:29,830 --> 00:02:33,120
them look better. Before we do that though,

31
00:02:33,340 --> 00:02:36,680
please note that we have an error here in our terminal.

32
00:02:36,730 --> 00:02:41,350
Now our app clearly works but the error we're getting here is that each child in a list should have

33
00:02:41,350 --> 00:02:46,190
a unique key prop and that's a normal React rule, nothing React Native specific.

34
00:02:46,300 --> 00:02:52,930
Indeed, you should always, when mapping this to a list of widgets, assign a key here so that React is able

35
00:02:52,930 --> 00:02:58,750
to efficiently update this list behind the scenes if it needs to. You do this by adding a key prop here

36
00:02:59,110 --> 00:03:01,730
and then the key should be some unique identifier,

37
00:03:01,780 --> 00:03:05,890
for now let's go with the goal itself which isn't strictly unique,

38
00:03:05,890 --> 00:03:09,970
you could enter the same goal with the same text twice which would give you an error

39
00:03:10,240 --> 00:03:12,650
but for now let's assume you're not doing that,

40
00:03:12,670 --> 00:03:17,720
therefore we can use goal as a key and if we do that, we're getting rid of that warning.

41
00:03:17,720 --> 00:03:21,850
If I now learned React Native, I can add this without an error.

42
00:03:21,850 --> 00:03:27,610
Again if I add the same text twice, then technically I don't even get an error here but this would be

43
00:03:27,610 --> 00:03:28,040
wrong,

44
00:03:28,040 --> 00:03:32,170
here it is, here is the error because I got two children with the same key.

45
00:03:32,200 --> 00:03:35,650
So, for now we'll just assume that you don't do that though,

46
00:03:35,770 --> 00:03:40,580
that's the normal key rule you have in normal React as well.

47
00:03:40,780 --> 00:03:46,210
So let's simply assume you don't enter the same goal twice and let's continue with styling these items

48
00:03:46,210 --> 00:03:48,910
because right now, they're not looking too exciting.