1
00:00:03,190 --> 00:00:05,330
We have everything that we need in place.

2
00:00:05,350 --> 00:00:06,310
We have our AGM.

3
00:00:06,910 --> 00:00:08,110
We have a CSIS.

4
00:00:08,410 --> 00:00:12,280
The only piece of code that remains is adding dynamics to our web app.

5
00:00:12,640 --> 00:00:14,800
So now that what we are going to do?

6
00:00:15,190 --> 00:00:19,150
So for that purpose, we have been eating state and for managing the state.

7
00:00:19,150 --> 00:00:21,190
We are going to use the hook up to act.

8
00:00:21,460 --> 00:00:25,810
They use data and we are going to manage our state with the help of a state.

9
00:00:25,960 --> 00:00:30,100
So first thing that we're going to do is import your state from the React module.

10
00:00:31,270 --> 00:00:38,980
So once you're done now, you're going to create a variable with the name of the user and get give it

11
00:00:38,980 --> 00:00:45,700
a certain function, said user, and will define the initial values as you state should be null.

12
00:00:46,990 --> 00:00:50,650
So just said user, and the initial rally should be null.

13
00:00:51,820 --> 00:00:56,650
As you might be aware, how this state function works because uses a variable set, uses a function

14
00:00:56,650 --> 00:00:58,870
that is going to change the value of future.

15
00:00:59,230 --> 00:01:04,090
Now that we have our state, let's create a function that is going to fetch our data from the API and

16
00:01:04,090 --> 00:01:05,200
stored it another user.

17
00:01:05,770 --> 00:01:07,150
So let's name this function.

18
00:01:07,150 --> 00:01:08,260
Can't get user.

19
00:01:08,590 --> 00:01:11,770
And as you know, this is going to be an add on function.

20
00:01:12,730 --> 00:01:14,320
So let's make the scenario function.

21
00:01:15,340 --> 00:01:17,110
Now, let's define a constant.

22
00:01:17,530 --> 00:01:21,160
And the name of constant should be response, consider response.

23
00:01:21,400 --> 00:01:29,650
And it should call our API to fetch our data from our API and and the EPA is a St-Pierre's random user

24
00:01:29,650 --> 00:01:31,120
dot me slash API.

25
00:01:31,930 --> 00:01:34,300
We're using the built in fetch method.

26
00:01:34,300 --> 00:01:39,190
We are not using any of their API like Axios, but feel free to use if you are compatible with it.

27
00:01:39,700 --> 00:01:42,370
But for this project, we're going to use the Fetch API only.

28
00:01:43,360 --> 00:01:46,480
So now we have a fetch method and we're going to get the response.

29
00:01:46,720 --> 00:01:48,460
Now there's a bit of problem with this code.

30
00:01:48,550 --> 00:01:51,880
You see what that is in a second.

31
00:01:52,420 --> 00:01:55,840
So now we have fixed our data and stored it in response.

32
00:01:55,870 --> 00:02:02,380
Now it's time to create another variable Gonzales data, and it should be response to Jason.

33
00:02:02,680 --> 00:02:08,380
So what basically, this line of code is going to do is convert our response data into the JASON format.

34
00:02:09,340 --> 00:02:16,420
And we are going to create another variable, and this time, let's just name it concert person, and

35
00:02:16,420 --> 00:02:22,360
it should be equal to data dot results with the Index zero, because what response to Jason is going

36
00:02:22,360 --> 00:02:29,010
to return is an array of objects, and we want the first object of the data results and added to it.

37
00:02:29,020 --> 00:02:30,640
Let us know, refactor our code.

38
00:02:31,120 --> 00:02:33,460
So what the as you might recall what we want.

39
00:02:33,460 --> 00:02:37,480
We want phone, we want e-mail and that should be equal to person.

40
00:02:37,930 --> 00:02:39,460
So we have got our phone number.

41
00:02:39,820 --> 00:02:46,290
We have got an email now that other values that we are going to need in our application Gonzales Lodge.

42
00:02:46,510 --> 00:02:48,430
So you might recall what dislodges.

43
00:02:48,430 --> 00:02:50,500
It was basically the picture of the person.

44
00:02:50,770 --> 00:02:53,860
So it was stored in the variable person dot picture.

45
00:02:54,190 --> 00:02:57,550
So we have got it for an e-mail picture and now is a time of password.

46
00:02:58,060 --> 00:03:01,420
Password was in the wrong credentials, so we are going to get this data from.

47
00:03:02,580 --> 00:03:05,070
Close two percent and log logging.

48
00:03:06,370 --> 00:03:11,590
No, the another piece of code that we want is the first name as well as the last name.

49
00:03:12,760 --> 00:03:16,210
We are not in the government of the birth and title, just birth and not name.

50
00:03:17,410 --> 00:03:18,670
Now we have a person name.

51
00:03:18,970 --> 00:03:24,160
Now it's time to get his date of birth, and as you might recall, in the date of birth, there was

52
00:03:24,160 --> 00:03:27,370
age as well as the date of birth, so we only won the age section.

53
00:03:27,640 --> 00:03:32,440
So we're just getting the age from person, and we even want his address, right?

54
00:03:32,710 --> 00:03:39,070
So let's name it st, and we want the street number as well, the street name, and that's all that

55
00:03:39,070 --> 00:03:39,550
we need.

56
00:03:40,990 --> 00:03:45,430
It should be again equal to the person in that location.

57
00:03:47,500 --> 00:03:50,480
So now we have data another.

58
00:03:50,680 --> 00:03:55,240
What are you going to do is store our data into an object because we have our data and form a phone

59
00:03:55,240 --> 00:03:55,560
number.

60
00:03:55,570 --> 00:04:01,560
We have our data stored in from a phone email, large password as well as age first email last.

61
00:04:01,570 --> 00:04:05,650
And this with no proper object that we can actually assign to how to use a user object, right?

62
00:04:05,920 --> 00:04:08,440
So let's create another new object and name it.

63
00:04:09,400 --> 00:04:14,620
Let's name it new person and store all the data that have gotten into that particular user.

64
00:04:16,000 --> 00:04:21,610
So the next step is to create another object, let's name it, new person and store all that we have

65
00:04:21,610 --> 00:04:22,360
got below.

66
00:04:22,630 --> 00:04:28,520
Example for an image large password firstname, lastname, age street number name into this object.

67
00:04:29,260 --> 00:04:36,410
So we have a large, we have our phone number, we have an email, we have a password, we have an age,

68
00:04:36,430 --> 00:04:39,430
we have a number, we have a name.

69
00:04:39,430 --> 00:04:41,200
We have our first and last name.

70
00:04:42,420 --> 00:04:48,780
Now, let's just change the large two image, because Liz might not be something that another quarter

71
00:04:48,780 --> 00:04:53,010
might be able to understand why this particular large is if it's going to just take a random guess area

72
00:04:53,020 --> 00:04:53,340
code.

73
00:04:53,640 --> 00:04:59,490
So let's just name it image and give it an alias in the last section of the post and what picture?

74
00:05:01,020 --> 00:05:06,240
So let's just name it, image and change large should be equal image.

75
00:05:07,310 --> 00:05:09,890
So now the next step is to create.

76
00:05:10,070 --> 00:05:16,010
And so before we move any further, there's a bit of modified thing that we are in agreement to do.

77
00:05:16,340 --> 00:05:21,750
If you look closely, we see that the image, the phone, the e-mail, the password and the age are

78
00:05:21,800 --> 00:05:22,910
independent variable.

79
00:05:22,940 --> 00:05:25,580
They are going to be displayed on a UI independently.

80
00:05:25,880 --> 00:05:32,240
And if we take a closer look, we see that the number and the name are the property of the place where

81
00:05:32,240 --> 00:05:33,030
the person lives.

82
00:05:33,050 --> 00:05:33,440
Right?

83
00:05:33,650 --> 00:05:37,550
Whereas the first in the class, the properties of the person's name.

84
00:05:37,970 --> 00:05:43,220
So we have to refactor this as if number and name comes in a single property and first and last come

85
00:05:43,220 --> 00:05:45,350
in a single property, which will define his name.

86
00:05:45,680 --> 00:05:46,480
So we're doing that.

87
00:05:46,850 --> 00:05:54,200
So first, make a variable street and no and no dollar sign and inside the codebase, you're right.

88
00:05:54,200 --> 00:05:54,630
No.

89
00:05:55,430 --> 00:05:59,360
Plus now we have given the number that we need to give the name of the street, right?

90
00:05:59,630 --> 00:06:03,110
So again, dollar sign and go places and now the name of the street.

91
00:06:03,500 --> 00:06:05,240
Now we are done with the location.

92
00:06:05,660 --> 00:06:08,000
Now we're going to clear the name variable.

93
00:06:08,180 --> 00:06:13,790
Now we will define a name variable and again, the dollar sign and the first and early races and the

94
00:06:13,790 --> 00:06:15,440
last name in curly braces.

95
00:06:15,770 --> 00:06:20,630
Now remove all those is that we have already defected.

96
00:06:21,140 --> 00:06:24,020
So this is a new code and this is how we're going to proceed.