We have everything that we need in place.
We have our AGM.
We have a CSIS.
The only piece of code that remains is adding dynamics to our web app.
So now that what we are going to do?
So for that purpose, we have been eating state and for managing the state.
We are going to use the hook up to act.
They use data and we are going to manage our state with the help of a state.
So first thing that we're going to do is import your state from the React module.
So once you're done now, you're going to create a variable with the name of the user and get give it
a certain function, said user, and will define the initial values as you state should be null.
So just said user, and the initial rally should be null.
As you might be aware, how this state function works because uses a variable set, uses a function
that is going to change the value of future.
Now that we have our state, let's create a function that is going to fetch our data from the API and
stored it another user.
So let's name this function.
Can't get user.
And as you know, this is going to be an add on function.
So let's make the scenario function.
Now, let's define a constant.
And the name of constant should be response, consider response.
And it should call our API to fetch our data from our API and and the EPA is a St-Pierre's random user
dot me slash API.
We're using the built in fetch method.
We are not using any of their API like Axios, but feel free to use if you are compatible with it.
But for this project, we're going to use the Fetch API only.
So now we have a fetch method and we're going to get the response.
Now there's a bit of problem with this code.
You see what that is in a second.
So now we have fixed our data and stored it in response.
Now it's time to create another variable Gonzales data, and it should be response to Jason.
So what basically, this line of code is going to do is convert our response data into the JASON format.
And we are going to create another variable, and this time, let's just name it concert person, and
it should be equal to data dot results with the Index zero, because what response to Jason is going
to return is an array of objects, and we want the first object of the data results and added to it.
Let us know, refactor our code.
So what the as you might recall what we want.
We want phone, we want e-mail and that should be equal to person.
So we have got our phone number.
We have got an email now that other values that we are going to need in our application Gonzales Lodge.
So you might recall what dislodges.
It was basically the picture of the person.
So it was stored in the variable person dot picture.
So we have got it for an e-mail picture and now is a time of password.
Password was in the wrong credentials, so we are going to get this data from.
Close two percent and log logging.
No, the another piece of code that we want is the first name as well as the last name.
We are not in the government of the birth and title, just birth and not name.
Now we have a person name.
Now it's time to get his date of birth, and as you might recall, in the date of birth, there was
age as well as the date of birth, so we only won the age section.
So we're just getting the age from person, and we even want his address, right?
So let's name it st, and we want the street number as well, the street name, and that's all that
we need.
It should be again equal to the person in that location.
So now we have data another.
What are you going to do is store our data into an object because we have our data and form a phone
number.
We have our data stored in from a phone email, large password as well as age first email last.
And this with no proper object that we can actually assign to how to use a user object, right?
So let's create another new object and name it.
Let's name it new person and store all the data that have gotten into that particular user.
So the next step is to create another object, let's name it, new person and store all that we have
got below.
Example for an image large password firstname, lastname, age street number name into this object.
So we have a large, we have our phone number, we have an email, we have a password, we have an age,
we have a number, we have a name.
We have our first and last name.
Now, let's just change the large two image, because Liz might not be something that another quarter
might be able to understand why this particular large is if it's going to just take a random guess area
code.
So let's just name it image and give it an alias in the last section of the post and what picture?
So let's just name it, image and change large should be equal image.
So now the next step is to create.
And so before we move any further, there's a bit of modified thing that we are in agreement to do.
If you look closely, we see that the image, the phone, the e-mail, the password and the age are
independent variable.
They are going to be displayed on a UI independently.
And if we take a closer look, we see that the number and the name are the property of the place where
the person lives.
Right?
Whereas the first in the class, the properties of the person's name.
So we have to refactor this as if number and name comes in a single property and first and last come
in a single property, which will define his name.
So we're doing that.
So first, make a variable street and no and no dollar sign and inside the codebase, you're right.
No.
Plus now we have given the number that we need to give the name of the street, right?
So again, dollar sign and go places and now the name of the street.
Now we are done with the location.
Now we're going to clear the name variable.
Now we will define a name variable and again, the dollar sign and the first and early races and the
last name in curly braces.
Now remove all those is that we have already defected.
So this is a new code and this is how we're going to proceed.