1
00:00:02,400 --> 00:00:09,660
Now that are error messages, we'll get error messages during development and reading them is a super important

2
00:00:09,660 --> 00:00:14,180
thing to do because they really can help us find out what's wrong.

3
00:00:14,310 --> 00:00:21,870
Now let's move on to errors which don't necessarily throw error messages or where you need to dig a

4
00:00:21,870 --> 00:00:30,840
bit deeper to find the root cause. Now let's for example say that in app.js, we wanted to find out

5
00:00:30,840 --> 00:00:39,390
if we were really deleting the right goal here. To find out whether that's the case, we can console log

6
00:00:40,500 --> 00:00:50,900
our goal ID here, maybe add some info text like to be deleted in front of this, so that we get some

7
00:00:50,900 --> 00:00:59,840
information about what's getting printed here and then we have our list of course goals here,

8
00:00:59,930 --> 00:01:03,360
so that's the list without the item being deleted

9
00:01:03,770 --> 00:01:06,710
and then we would want to see it after that being deleted

10
00:01:06,710 --> 00:01:12,170
but the way this set state function here works in the end, the way React updates the state,

11
00:01:12,170 --> 00:01:17,350
just printing the course goals again in this line won't give us the already updated course goals, instead

12
00:01:17,370 --> 00:01:20,390
that will only be updated in the next render cycle.

13
00:01:20,390 --> 00:01:23,480
So we'll not see our course goals there but that's no problem,

14
00:01:23,480 --> 00:01:30,860
we just need to log this at a different place, we log this right here in our component. There we log

15
00:01:30,860 --> 00:01:35,920
the course goals and this entire component will be re-rendered when we update our course goals with

16
00:01:35,920 --> 00:01:36,630
this line,

17
00:01:36,730 --> 00:01:46,090
so this will rerun, so we can maybe just also add a little console log, re-rendering component, so that

18
00:01:46,090 --> 00:01:54,370
we know that the course goal list we're printing after this one is the list after every re-render cycle

19
00:01:54,610 --> 00:01:59,890
whereas the course goal list we're printing after this to be deleted line is the course goal list before

20
00:01:59,890 --> 00:02:04,270
we deleted a course goal and now we added some console log statements that allow us to dive into

21
00:02:04,270 --> 00:02:10,390
the flow of our code. With that if I save this, the app restarts and we already see re-rendering component

22
00:02:10,480 --> 00:02:14,650
which makes sense, it's getting rendered the first time and we see we have an empty array which also makes

23
00:02:14,650 --> 00:02:17,210
sense because we haven't added anything.

24
00:02:17,320 --> 00:02:26,400
Now let's add a new goal, maybe here on Android, finish the course. If we do that, we see the component

25
00:02:26,470 --> 00:02:33,810
re-renders, makes sense because we added something and then most importantly for the other re-rendering

26
00:02:33,810 --> 00:02:39,810
where we added an item, we see that item here in the array, we also see the ID of that item and the value

27
00:02:39,810 --> 00:02:51,780
which looks all right. Now let's add another item maybe, learn React Native and add this and we see this here,

28
00:02:51,780 --> 00:02:55,350
we just now see that it's an array with two items

29
00:02:55,350 --> 00:03:01,770
if we expand this here. So we're now able to look into our code and now let's delete an item by clicking

30
00:03:01,770 --> 00:03:07,560
on it and let's delete the finish the course item with the ID 0.818 and so on.

31
00:03:08,310 --> 00:03:11,070
So if I click finish the course, you see it gets removed,

32
00:03:11,070 --> 00:03:14,380
so it seems to work correctly and our console log confirms this,

33
00:03:14,400 --> 00:03:20,940
we are re-rendering, we're re-rendering our array with this ID only, so with the other item which we

34
00:03:20,940 --> 00:03:25,830
didn't delete and up there, we see to be deleted is this ID here,

35
00:03:25,950 --> 00:03:29,220
this log is coming from this line before we deleted it,

36
00:03:29,250 --> 00:03:35,490
so it's still included but for the next re-render cycle, we see that this ID here is indeed not included

37
00:03:35,490 --> 00:03:36,320
anymore.

38
00:03:36,390 --> 00:03:38,250
Of course, that's a bit of a made up example,

39
00:03:38,250 --> 00:03:43,290
we of course see that that's behaving correctly here but simply imagine you have a more complex flow

40
00:03:43,290 --> 00:03:48,540
in your code you want to debug, then such console log statements can really help you understand how your

41
00:03:48,540 --> 00:03:53,310
code is running, how often it's running and if the correct values are getting used.

42
00:03:53,520 --> 00:03:58,470
So console log statements can really be helpful if you dump them into your code, just don't forget

43
00:03:58,470 --> 00:04:03,900
to also remove them eventually so that you don't crowd your code with tons of console log statements.