So when we visit our admin area and we then want to add a new product, we get this error here, we
get this error that get Perram is not a function.
And indeed, with respect, navigation five, get Perram.
This function you would use to get the parameters for a given navigation action was removed.
So let's see what else we can do for that.
Let's go to the added product screen, which is the screen we're trying to visit, which fails here.
And we certainly use get Perram here.
But also here in the main added product screen component, now with reactivation five, there is no
get Perram function anymore.
Instead, there now is a new prop besides that navigation prop, which you also still have to do certain
actions like navigate away.
But you've got a new proposal now, which is the root prop.
This wasn't available before.
Now it does exist.
Now, on this aroud prop, you'll have a parent's key just named parents, not get parents.
It's not a function.
It's just a key named Perrin's, which holds an object with all your parents you're receiving as key
value pairs.
So here we can then conveniently extract the parent we want to get.
So before I wanted to get the product, I'd perram.
So now we access props Routt Perm's product ID and this should work.
Now, depending on your application, you might not always be getting a value for this parameter.
So sometimes it might be undefined.
And for that reason you could of course, also check whether this is normal or whether this is undefined
before you try to use it.
Now, when it comes to set perens, which we're also using here in this component.
Here, this still exists, but for the reason we're using it here, we don't need to use it anymore
here we were using it as a workaround to basically get data from our component body.
So from inside our component function into the navigation options down there.
Right.
The submit function.
And also here, our product ID, we were extracting that data like this now actually for the product.
And that's fine because that's a general root specific piece of information which we're interested in
and we can still extracted like this.
But getting the function from our component to the navigation options, as we did before, that was
really a bit hackey and not really how we want to do that.
Now, for the moment, however, I will keep the same approach as before.
But one thing needs to change.
We don't have get Perram anymore.
Instead, NAV data is an object which also has this new route prop, this new route object so we can
access NAV data.
Dot, dot, dot, parents, dot, submit and get to submit function like this and to same down there.
Here we have dot route dot parents dot product ID like this.
With that all out of the way, if we now save this, this rebuilds here.
And with it being rebuilt, if we now go to admin again and click on this icon, I get an error that
undefined is not an object when it try to evaluate, navigate around Perm's submit.
So what's wrong there?
The problem we're facing here is that Perens isn't always defined if this screen gets loaded without
any parents, as it is the case when we're in the ad product mode, which we are, if we just clicked
on the bottom to the top right corner.
So if there are no parents passed to the screen, then this entire parents key here holds undefined
as a value.
It does not hold an empty object without parents itself is undefined instead.
So that's important to keep in mind.
Perrin's itself will be undefined if there are no parents and if we're opening this screen in order
to add a product.
Indeed, there are no parents.
Initially, this submit Perram isn't set initially because that's only done from inside the component.
So often the screen has been loaded and product I.D. definitely isn't set because we're not editing,
but adding so there is no product ID fed into this screen when we navigate to it.
So how do we make sure we're not getting an error then?
Well, we simply have to check whether parents itself is defined or not.
And we could do this down here by rewriting this so that we first try to access parents and then we
use this as a condition in a ternary expression and say if that is truthy, which it is only if it is
defined.
So if it is Truthy, then we want to try to access.
Parents submit because then we know that parents at least, is not undefined and otherwise will set
submit function to null, let's say, and we can repeat this down there, too, for the header title.
Now, we already have a ternary expression here.
We can nest those expressions, but to make it a bit more readable, all Splinter's across multiple
lines.
And I will have my Roud parents here.
Where I basically check if Nadaf data route is a thing, if it is, then I'll store the parents in this
rootworms constant, otherwise I'll setas to an empty object.
Let's say not by doing this we can use Rawad.
Parents here and now, as ever, is an empty object, in which case we can access product ID without
an error but will get undefined as a result.
Hence will be an ADD product.
Or if parents is found, then I'll set the actual terms object as a value for rootworms and we then
access actual Perrin's object on there.
So in either case, this shouldn't fail and we can do something similar in the component.
Of course, dear.
We also try to access our parents.
So here we should also check whether this is actually Truthy.
If it is to find and if it is, then we access the parents and otherwise product ideas set to null.
So this is one way how you could work around this.
And if we now safeties and reload this application.
We can go to the admin screen, click this button and load this screen here successfully in order to
add a product.
Now quickly test this with a book.
Enter the image you are out here and a price here and a test book description here.
And with that.
I can submit this and to generally works here as our book, if I now click on EDIT, we load this edited
screen with the book data so that all looks good.
And if I deleted.
Well, that does not work, I got an error here.
We'll have to look into that, but at least it now works correctly when it comes to the parents.
However, I did mention that there is one thing we can improve about rude parents.
If we have a case like this year with the submit function where we abuse parents to get data from the
component body to our navigation options, because with REACT Navigation five, we now have a nicer
way of achieving this.