Okay.
And before we move on to the next topic, let's also cover how to access data in the component which
is provided by the action.
Now, right away, want to mention that we won't use such approach in this project basically in this
course.
So technically this video is optional.
If you don't want to type along, you don't have to just sit back and relax.
But I thought it's super important for you to know such approach just in case you want to implement
it in your own application.
So effectively, what am I talking about?
Well, if we take a look at our login one, notice how we're not technically accessing any of this data
in the component.
So in here, yes, we return, if we're successful, a redirect and effectively we go to a dashboard
page.
And if there is an error, yes, we do return the error.
But I mean, we just call toast before that and we're pretty much call it a day.
Now, why do we want to access data coming back from the action?
Well, what if you want to do some error checking before you send the request?
Or maybe you just want to display the error in the component, not in the toast.
So for starters, let's go back where we have the action.
And before we make a request back to our server, why don't we make a errors object?
And also, why don't we make a check where if the password length is, for example, less than three,
then we return the errors object with some kind of message.
So right after data I'm going to go with errors.
We're going to set it up as an object.
There's going to be a message property, and for starters, it's just going to be empty.
Then I'll make that check.
Like I said, you can set up whatever check you want.
And of course, this is technically going to be only dummy check, but I'm going to go with data.
Remember, both of those values are located there since run object from entries.
Then I'm looking for password.
More specifically, that's the property which is going to be over there.
And then I just want to simply go with length.
And I'll say if it's less than three.
So what do I want to do?
Well, I have errors, object, and I'll set the message property equal to something.
So in my case I'm going to go with password too short.
Then, of course I want to return and I want to return the errors object.
So notice how we're not going to even make the request if we'll hit this condition now in order to access
the errors object, I want to go up and we're looking for use action data.
So again, the hook name is use action data.
Then we navigate back to our component and effectively we'll have access to the object.
Now I'm going to skip the part where I console.log.
If you want to do that, please do so.
But in my case I'm just going to go with const.
I'll set it equal to an errors, then we'll go use action data.
Please keep in mind that initially of course it's going to be undefined, so this will only have some
kind of value if we hit this condition once we submit the form.
And then let's keep on moving and let's imagine that right after I don't know the heading for.
I want to set up some kind of paragraph over here.
And essentially there's going to be a condition.
I'll say over here, if the errors message has some kind of value, well then display it in the paragraph.
So in here, let's go with optional chaining dot and then message.
And if it has some kind of value, then we want to go with paragraph.
Then let's add a style over here and we're going to go with color red again.
I'll remove all of this code once we're done.
And then basically we want to display the errors.
And message.
Let's save it.
Let's navigate to a browser.
Going to provide some kind of value here.
And I'm going to provide only two characters since that is less than three.
Once we submit notice, now we have password to short.
Again, if you want to log what's happening, please do so.
But effectively we have this errors that we set up in the action and even before we send the request,
we return from the action.
Remember, we always, always want to return.
And then in order to access that, well, we just need to use use action data again.
Initially it's going to be undefined when the component mounts, but once we submit the form and if
there is an error, if we return it, then yes, we'll access it and then we can do something about
it.
Now also we can do the same thing when we make the request again.
At the moment we're just pretty much displaying the toast.
However, we can change this around.
I can go with, okay, let's comment this one out so we're not going to use the toast.
Instead, remember, we have the errors object in there, we have the message, and now I will pretty
much set it equal to whatever is coming back from the server.
So this logic doesn't change.
The only difference is, of course, that now we're returning errors.
So if I navigate back right now and let's say if I add more characters but my password still doesn't
match whatever I have in the database, now of course I'm going to have invalid credentials.
So this is coming back from the back end.
This is coming back from my server.
So this is how we can access the data.
From the action.
Again, the hook we're looking for is use action data.