1
00:00:00,600 --> 00:00:06,390
So now that we have added every piece of code that our app needs, it's now time to take a look at it.

2
00:00:06,780 --> 00:00:09,300
So if Kara received, there is nothing.

3
00:00:09,330 --> 00:00:10,620
They are just placeholders.

4
00:00:11,100 --> 00:00:13,880
So this does means that we are not getting any sort of data.

5
00:00:13,890 --> 00:00:15,000
We are not displaying it.

6
00:00:15,330 --> 00:00:16,830
So let's fix this.

7
00:00:17,340 --> 00:00:22,980
So now let's first confirm whether we are getting the data from our API and as you are storing it in

8
00:00:22,980 --> 00:00:23,850
our tools object.

9
00:00:24,180 --> 00:00:30,270
So we can't allow the value of tools so that we can confirm that without getting our data or not.

10
00:00:31,170 --> 00:00:37,470
So let's just console.log the value of tools and place to us in an object in the codebases.

11
00:00:39,590 --> 00:00:44,660
So will this console.log and inside Libya says they'll write those stories to the state object, which

12
00:00:44,660 --> 00:00:47,930
is holding an object of travelling data?

13
00:00:48,650 --> 00:00:53,330
No, if we just open up our console, we can control shift I.

14
00:00:53,780 --> 00:00:59,480
We will be seeing an error which actually fixing shortly as well as some objects inside it.

15
00:00:59,840 --> 00:01:03,830
And these objects holds the value of what we are going to output and ultimately.

16
00:01:07,470 --> 00:01:11,520
We see that there's a dos object with five values in it.

17
00:01:11,940 --> 00:01:18,330
It is an area of objects with zero one, two, three, four and five that name I.D. indicates.

18
00:01:19,110 --> 00:01:22,390
So now let's go back to it up and make certain changes that are incremental.

19
00:01:22,410 --> 00:01:22,800
Be done.

20
00:01:23,130 --> 00:01:28,290
So first of all, be getting rid of all this data because this is not what we are getting from our API.

21
00:01:28,740 --> 00:01:30,490
If we again open up our console.

22
00:01:31,050 --> 00:01:31,470
We'll see.

23
00:01:31,470 --> 00:01:34,560
There's a different set of data with different developers that we're getting in here.

24
00:01:35,280 --> 00:01:40,830
So the first set of data that we are receiving from our API is the 80 property and the name.

25
00:01:41,460 --> 00:01:46,380
And we just open it may we're getting information name, as well as the price of the place that we're

26
00:01:46,380 --> 00:01:46,980
going to go.

27
00:01:47,640 --> 00:01:53,760
So let's go back and change all these values to 80 place price and other.

28
00:01:55,060 --> 00:01:58,360
Values and image is going to be the photo of the place that we are going to go.

29
00:02:00,590 --> 00:02:04,580
We have got the info, we have got the name and the price.

30
00:02:06,770 --> 00:02:11,570
Information is the information of that particular place will be the caller wants to know.

31
00:02:12,580 --> 00:02:13,810
The name and price.

32
00:02:14,650 --> 00:02:14,970
OK.

33
00:02:15,280 --> 00:02:20,440
No, replacing all the values for the source element will be just giving you the source value of image

34
00:02:20,920 --> 00:02:26,470
because that's the image and really the art of name.

35
00:02:29,120 --> 00:02:32,420
And in the Atualmente will again replace the word title with name.

36
00:02:34,650 --> 00:02:40,740
And with the sub, this is basically the inflow of other of the places, so we'll just replace it with

37
00:02:40,750 --> 00:02:41,970
an info.

38
00:02:44,640 --> 00:02:49,800
And now, rather than the static data, will be to dynamically with price.

39
00:02:51,500 --> 00:02:54,290
OK, let's just hit save and view it up again.

40
00:02:55,610 --> 00:03:02,000
But before we do that, let's go to our tools object, and there was one error that we were seeing their

41
00:03:02,030 --> 00:03:02,930
key value pair.

42
00:03:03,320 --> 00:03:07,130
So we'll assign us to a kill I.D..

43
00:03:09,310 --> 00:03:15,680
We'll give it a try because each value of each element of a map should have a specific key that is not

44
00:03:15,760 --> 00:03:16,570
applicable.

45
00:03:17,140 --> 00:03:23,290
So we'll go to Italy and Italy specific to a particular object, 2.8 to.

46
00:03:28,690 --> 00:03:33,730
And it's safe, and let's go back now, I heard that up, and we'll see.

47
00:03:35,740 --> 00:03:37,240
OK, let's clear our console first.

48
00:03:41,430 --> 00:03:43,170
And then again, refresh our up.

49
00:03:49,370 --> 00:03:50,120
Will they not?

50
00:03:55,140 --> 00:03:56,400
Single area of objects.

51
00:03:57,870 --> 00:04:04,200
So now we're getting our data and we are displaying it on our screen, so as you can see, there's different

52
00:04:04,200 --> 00:04:12,960
faces, but there's a dollar sign missing, so that's just a dollar sign in our tour component in another

53
00:04:12,960 --> 00:04:13,380
price.

54
00:04:14,040 --> 00:04:15,030
We let a dollar sign.

55
00:04:16,550 --> 00:04:19,670
Because how is the use of us to know whether it's a dollar pound euro?

56
00:04:20,860 --> 00:04:26,250
OK, now we have it all the time and everything in this place, but still they're not interested.

57
00:04:26,270 --> 00:04:30,370
Burton isn't working, right, so what we'll do is add.

58
00:04:31,580 --> 00:04:34,220
Functionality to not interested in button.

59
00:04:34,550 --> 00:04:38,480
So if we go to our dashboard, we'll create a function with Konst.

60
00:04:38,930 --> 00:04:42,560
Let's name it, remove a tool and give it the.

61
00:04:43,780 --> 00:04:44,470
Property ID.

62
00:04:45,920 --> 00:04:47,030
Argument at the end.

63
00:04:47,610 --> 00:04:50,300
Now let's create another object.

64
00:04:50,450 --> 00:04:52,100
Call it going to new doors.

65
00:04:52,430 --> 00:04:58,970
This is going to be the ability to after one particular tool has been deleted and we will be filtering

66
00:04:59,330 --> 00:05:00,170
the tools in this.

67
00:05:00,380 --> 00:05:03,530
So it goes further than a gain of function call back.

68
00:05:03,860 --> 00:05:07,610
I will give it a tool and which should be equal to.

69
00:05:10,580 --> 00:05:19,520
If 2.80 told Ali is not equal to the idea that we have received, then we are supposed to return the

70
00:05:19,520 --> 00:05:19,990
value.

71
00:05:22,600 --> 00:05:26,360
So that is going to match, we have to exterminate that value.

72
00:05:26,380 --> 00:05:32,640
It is no longer in the government to be shown on up and we were setting new to so what sector is going?

73
00:05:32,660 --> 00:05:32,980
It does.

74
00:05:32,980 --> 00:05:34,390
It is going to have data to it.

75
00:05:35,590 --> 00:05:41,020
So the object that we had actually deleted won't be showing on again and again.

76
00:05:41,020 --> 00:05:47,470
We are to pass this as an as a prop to our other components to remove dirt and give it a value of remove

77
00:05:47,480 --> 00:05:47,800
dirt.

78
00:05:52,020 --> 00:05:56,670
OK, then again, let's move to a truce component, because that's that's the next level.

79
00:05:58,170 --> 00:06:02,700
And he'll be receiving along with the tools they remove to the object.

80
00:06:03,690 --> 00:06:04,800
Remove those.

81
00:06:07,210 --> 00:06:13,900
And again, to pass it along to a tour component that removed those equals to remove those.

82
00:06:20,890 --> 00:06:28,720
And he'd say then we have to go to our to object and we'll be receiving removed it from a previous component

83
00:06:28,720 --> 00:06:37,630
that is and again, we'll create a button and respond click we'll call this function and click Let's

84
00:06:37,630 --> 00:06:41,050
give it the arrow function and call to remove to.

85
00:06:48,630 --> 00:06:53,910
OK, so we have a remote, we're over here and we'll get the I.D. that of the particular object.

86
00:06:54,570 --> 00:06:57,060
And let's just hit save and view up.

87
00:06:59,570 --> 00:07:01,070
To leave Europe again.

88
00:07:05,060 --> 00:07:07,310
And click not invested, we will see an error.

89
00:07:07,460 --> 00:07:09,050
So why is this error coming up?

90
00:07:10,340 --> 00:07:11,350
Let's just read it.

91
00:07:11,360 --> 00:07:15,930
It's removed already and the rest is removed or is not a function.

92
00:07:15,950 --> 00:07:17,270
Let's just refresh it again.

93
00:07:18,960 --> 00:07:22,650
OK, so probably it has some sort of typo in it.

94
00:07:23,070 --> 00:07:28,050
So now let's head back to Iraq component, so we see removed doors.

95
00:07:28,650 --> 00:07:29,700
It is fine over here.

96
00:07:31,080 --> 00:07:34,180
OK, so they're supposed to be told not to.

97
00:07:34,200 --> 00:07:37,230
So this was a disorder, Typekit admitted.

98
00:07:37,740 --> 00:07:41,490
So let's just remove the word is from a function.

99
00:07:41,730 --> 00:07:45,880
And again had to and it is going to be towed.

100
00:07:45,890 --> 00:07:46,830
Let's confirm it again.

101
00:07:47,100 --> 00:07:49,140
It has to be stored, not doors.

102
00:07:50,280 --> 00:07:57,080
OK, now if we just click not infested VXR components getting disbanded from our UI.

103
00:07:59,310 --> 00:08:00,720
OK, so it's functioning now.

104
00:08:02,380 --> 00:08:07,630
So we have is fully implemented rendering of the components as well as we are removing them.

105
00:08:08,320 --> 00:08:13,330
Now it's time to add loading as well as some other functionalities to adapt.

106
00:08:13,540 --> 00:08:14,920
So really focusing on it now?