1
00:00:02,260 --> 00:00:15,550
So when we visit our admin area and we then want to add a new product, we get this error here, we

2
00:00:15,550 --> 00:00:18,000
get this error that get Perram is not a function.

3
00:00:18,340 --> 00:00:23,560
And indeed, with respect, navigation five, get Perram.

4
00:00:23,560 --> 00:00:31,080
This function you would use to get the parameters for a given navigation action was removed.

5
00:00:31,540 --> 00:00:35,140
So let's see what else we can do for that.

6
00:00:35,140 --> 00:00:40,720
Let's go to the added product screen, which is the screen we're trying to visit, which fails here.

7
00:00:41,320 --> 00:00:44,200
And we certainly use get Perram here.

8
00:00:45,970 --> 00:00:53,800
But also here in the main added product screen component, now with reactivation five, there is no

9
00:00:53,800 --> 00:00:55,450
get Perram function anymore.

10
00:00:55,690 --> 00:01:03,070
Instead, there now is a new prop besides that navigation prop, which you also still have to do certain

11
00:01:03,070 --> 00:01:04,720
actions like navigate away.

12
00:01:05,320 --> 00:01:08,500
But you've got a new proposal now, which is the root prop.

13
00:01:08,740 --> 00:01:10,280
This wasn't available before.

14
00:01:10,300 --> 00:01:11,620
Now it does exist.

15
00:01:12,460 --> 00:01:18,820
Now, on this aroud prop, you'll have a parent's key just named parents, not get parents.

16
00:01:18,820 --> 00:01:19,810
It's not a function.

17
00:01:19,810 --> 00:01:26,890
It's just a key named Perrin's, which holds an object with all your parents you're receiving as key

18
00:01:26,890 --> 00:01:27,840
value pairs.

19
00:01:28,300 --> 00:01:31,970
So here we can then conveniently extract the parent we want to get.

20
00:01:32,260 --> 00:01:35,610
So before I wanted to get the product, I'd perram.

21
00:01:35,920 --> 00:01:41,830
So now we access props Routt Perm's product ID and this should work.

22
00:01:42,100 --> 00:01:46,990
Now, depending on your application, you might not always be getting a value for this parameter.

23
00:01:46,990 --> 00:01:49,090
So sometimes it might be undefined.

24
00:01:49,510 --> 00:01:56,080
And for that reason you could of course, also check whether this is normal or whether this is undefined

25
00:01:56,260 --> 00:01:58,410
before you try to use it.

26
00:01:59,020 --> 00:02:05,260
Now, when it comes to set perens, which we're also using here in this component.

27
00:02:06,310 --> 00:02:13,590
Here, this still exists, but for the reason we're using it here, we don't need to use it anymore

28
00:02:13,840 --> 00:02:20,550
here we were using it as a workaround to basically get data from our component body.

29
00:02:20,590 --> 00:02:25,870
So from inside our component function into the navigation options down there.

30
00:02:25,900 --> 00:02:26,230
Right.

31
00:02:26,260 --> 00:02:27,460
The submit function.

32
00:02:27,580 --> 00:02:33,760
And also here, our product ID, we were extracting that data like this now actually for the product.

33
00:02:33,760 --> 00:02:39,580
And that's fine because that's a general root specific piece of information which we're interested in

34
00:02:39,700 --> 00:02:41,320
and we can still extracted like this.

35
00:02:41,530 --> 00:02:47,020
But getting the function from our component to the navigation options, as we did before, that was

36
00:02:47,020 --> 00:02:51,040
really a bit hackey and not really how we want to do that.

37
00:02:51,430 --> 00:02:54,960
Now, for the moment, however, I will keep the same approach as before.

38
00:02:54,970 --> 00:02:56,600
But one thing needs to change.

39
00:02:56,620 --> 00:02:58,450
We don't have get Perram anymore.

40
00:02:58,570 --> 00:03:05,530
Instead, NAV data is an object which also has this new route prop, this new route object so we can

41
00:03:05,530 --> 00:03:07,330
access NAV data.

42
00:03:08,980 --> 00:03:15,820
Dot, dot, dot, parents, dot, submit and get to submit function like this and to same down there.

43
00:03:15,880 --> 00:03:21,280
Here we have dot route dot parents dot product ID like this.

44
00:03:22,540 --> 00:03:27,400
With that all out of the way, if we now save this, this rebuilds here.

45
00:03:28,960 --> 00:03:35,950
And with it being rebuilt, if we now go to admin again and click on this icon, I get an error that

46
00:03:35,950 --> 00:03:41,750
undefined is not an object when it try to evaluate, navigate around Perm's submit.

47
00:03:42,250 --> 00:03:43,560
So what's wrong there?

48
00:03:44,920 --> 00:03:53,230
The problem we're facing here is that Perens isn't always defined if this screen gets loaded without

49
00:03:53,230 --> 00:03:58,570
any parents, as it is the case when we're in the ad product mode, which we are, if we just clicked

50
00:03:58,570 --> 00:04:00,150
on the bottom to the top right corner.

51
00:04:00,400 --> 00:04:07,120
So if there are no parents passed to the screen, then this entire parents key here holds undefined

52
00:04:07,120 --> 00:04:07,710
as a value.

53
00:04:07,720 --> 00:04:12,720
It does not hold an empty object without parents itself is undefined instead.

54
00:04:13,060 --> 00:04:14,560
So that's important to keep in mind.

55
00:04:14,800 --> 00:04:21,520
Perrin's itself will be undefined if there are no parents and if we're opening this screen in order

56
00:04:21,520 --> 00:04:22,900
to add a product.

57
00:04:23,090 --> 00:04:24,640
Indeed, there are no parents.

58
00:04:24,640 --> 00:04:30,250
Initially, this submit Perram isn't set initially because that's only done from inside the component.

59
00:04:30,370 --> 00:04:36,310
So often the screen has been loaded and product I.D. definitely isn't set because we're not editing,

60
00:04:36,310 --> 00:04:41,840
but adding so there is no product ID fed into this screen when we navigate to it.

61
00:04:42,610 --> 00:04:46,080
So how do we make sure we're not getting an error then?

62
00:04:46,450 --> 00:04:51,310
Well, we simply have to check whether parents itself is defined or not.

63
00:04:52,120 --> 00:05:00,250
And we could do this down here by rewriting this so that we first try to access parents and then we

64
00:05:00,250 --> 00:05:06,520
use this as a condition in a ternary expression and say if that is truthy, which it is only if it is

65
00:05:06,520 --> 00:05:07,050
defined.

66
00:05:07,450 --> 00:05:11,590
So if it is Truthy, then we want to try to access.

67
00:05:12,530 --> 00:05:18,160
Parents submit because then we know that parents at least, is not undefined and otherwise will set

68
00:05:18,200 --> 00:05:23,310
submit function to null, let's say, and we can repeat this down there, too, for the header title.

69
00:05:23,780 --> 00:05:26,300
Now, we already have a ternary expression here.

70
00:05:26,300 --> 00:05:31,700
We can nest those expressions, but to make it a bit more readable, all Splinter's across multiple

71
00:05:31,700 --> 00:05:32,210
lines.

72
00:05:32,600 --> 00:05:35,570
And I will have my Roud parents here.

73
00:05:36,840 --> 00:05:45,840
Where I basically check if Nadaf data route is a thing, if it is, then I'll store the parents in this

74
00:05:45,840 --> 00:05:49,560
rootworms constant, otherwise I'll setas to an empty object.

75
00:05:49,560 --> 00:05:52,740
Let's say not by doing this we can use Rawad.

76
00:05:52,740 --> 00:05:58,740
Parents here and now, as ever, is an empty object, in which case we can access product ID without

77
00:05:58,740 --> 00:06:01,500
an error but will get undefined as a result.

78
00:06:01,740 --> 00:06:03,130
Hence will be an ADD product.

79
00:06:03,690 --> 00:06:10,830
Or if parents is found, then I'll set the actual terms object as a value for rootworms and we then

80
00:06:10,830 --> 00:06:13,080
access actual Perrin's object on there.

81
00:06:13,230 --> 00:06:17,760
So in either case, this shouldn't fail and we can do something similar in the component.

82
00:06:17,760 --> 00:06:18,930
Of course, dear.

83
00:06:18,930 --> 00:06:20,810
We also try to access our parents.

84
00:06:21,090 --> 00:06:24,480
So here we should also check whether this is actually Truthy.

85
00:06:24,480 --> 00:06:30,910
If it is to find and if it is, then we access the parents and otherwise product ideas set to null.

86
00:06:31,560 --> 00:06:33,660
So this is one way how you could work around this.

87
00:06:33,660 --> 00:06:37,470
And if we now safeties and reload this application.

88
00:06:38,730 --> 00:06:45,870
We can go to the admin screen, click this button and load this screen here successfully in order to

89
00:06:45,870 --> 00:06:46,800
add a product.

90
00:06:47,130 --> 00:06:51,090
Now quickly test this with a book.

91
00:06:52,460 --> 00:07:01,220
Enter the image you are out here and a price here and a test book description here.

92
00:07:02,070 --> 00:07:03,390
And with that.

93
00:07:04,340 --> 00:07:11,510
I can submit this and to generally works here as our book, if I now click on EDIT, we load this edited

94
00:07:11,510 --> 00:07:14,150
screen with the book data so that all looks good.

95
00:07:14,150 --> 00:07:15,050
And if I deleted.

96
00:07:17,390 --> 00:07:20,250
Well, that does not work, I got an error here.

97
00:07:20,750 --> 00:07:25,430
We'll have to look into that, but at least it now works correctly when it comes to the parents.

98
00:07:25,630 --> 00:07:31,310
However, I did mention that there is one thing we can improve about rude parents.

99
00:07:31,550 --> 00:07:37,700
If we have a case like this year with the submit function where we abuse parents to get data from the

100
00:07:37,700 --> 00:07:43,580
component body to our navigation options, because with REACT Navigation five, we now have a nicer

101
00:07:43,580 --> 00:07:44,930
way of achieving this.