Now, if you take a look at Arab ABC, there are two dynamic peace and two dynamic elements.
One of them is another is value, which is dynamically changing up on every mouse hover, right?
So for this purpose will be defining two pieces of state, one for title and another for value in function
app.
And for that book.
But before we do that, we see that there's we have defined a great deal as a function whose task is
to get our data from our API.
Right now, the question at hand is that where should we call this function because we have defined
it, but we need to call it?
So the best place to call it might be, in this case, the user factbook.
So for that purpose, let's first input adios if I.
Now will define the use of a coke, give it at a function.
And caller, get to user.
And even give it an empty Eddie.
No, the task at hand is to define the other two pieces of state, one for tightly and another for the
value and give them an initial value to both of them.
So Konst title and so the function is going to be set tightly.
Basically, that's the convention that we use.
So title and give it initial value of random boson.
Now, another piece of state that is the value.
Give it set value as a function, which is going to set its value and give it an initial state of.
Name.
Now, where should we call these two functions and where should we call the assertive conscience?
So right at the place where we call assertive function for the user will be calling these two because
we want them to work simultaneously, right?
Right.
A new person is defined.
We want their new title as well as the new value.
Therefore, we'll be just placing them one below the end of the.
So subtitle and give it a value of name, because the first thing that we are going to be shown on our
air is the name of the person and set value with new person.
Not name.
So it is going to be like my name is and the name of the person, right?
So now what are you going to do is create a function that is going to change the value of property title
and value whenever we have our different icons.
So let's start it.
So the first thing that we're going to do is create a constant and never function as handled value.
But at an event, and so they're not often function, as you can see.
And if.
The event does target not call list that contains the icon property, so you can see button elements
right there having class name of icons and a little label of name.
So if they contain icon property, what we want is.
Can still create a new concert value and call it new value.
We want to target that dataset, that label means if I'm hovering over, I can refuse any.
I wanted labor to change to name.
If I am hovering over the going of map, I want the label to change to a street.
And if I'm hovering over the phone, then I want to read the labor to change the font and so on and
so forth.
So this is what this code means.
So we are changing the new value right now.
Let's assign it now SEC title.
We want a title to be this new value, and what we want to add value to be is user dark, new value.
So the subtitle is going to do it's going to say to you that, OK, my name is and that value is going
to give the value and that is going to say my email addresses, and that really is going to give you
an email address.
So that's what it is all about.
So now we are in control of all the data that we require.
Right?
So let's make some tweaks to our app.
The first one is going to be in the image element.
We are going to replace the source with a dynamic source.
So the first thing that we're going to do is replace our source with user double ampersand and use our
dart image.
So this is basically a security check that says that only sure, the image of a user if the user object
is present, otherwise there's no point of even showing the user image.
And in the.
We would just replace it with my title is and other than that will change, the value is going to be
value.
Now if you're wondering how time doing this, this is just multi-course editing.
If you want to do anything work, all you need to do is just hold on your old and select on all those
places.
They want to make some changes and the property that they're going to you as well is on mouse over.
On Mozilla and assign our handle value matter to it.
So what basically handle value is so and value is a matter that is going to change the title and value
on every Mozilla.
So we need to attach it to abundant elements and that's what we did just know and hit save.
So now, if we look at the UI, we will see a big, nasty error.
And why is it that let us discuss when we see it?
So if we just head back to our browser window, we'll see that response.
Jason is not a function and the error comes on line number 16.
OK, I've got just fine.
So let's head back to a.
Data.
And Hevesi, there's a response he goes to fetch calling out API.
No, it's not that we are going to fetch our API.
The instant we call it right, it needs some time for that purpose.
We need to attach a keyword known as of it and for a way to be available by an app.
They need to actually define this function as a async function.
So now we can actually use the word of eight keyword in it so that if those are executed at victory,
able to resolve a promise that they going that is going to be written by our fetch method and will again
just evaded.
Now, the problem that was there is going to be resolved.
No, if he had save and head back to a quarter, you will see that we have a boss and now we have his
name, we have his place where he lives.
We have his phone number.
We have his age.
We have an email we have is password.
And you can see all his properties.
So we have successfully created an app.