1
00:00:00,330 --> 00:00:08,340
Amazing job, we successfully watched all our tours there, so of course, let's worry about displaying

2
00:00:08,340 --> 00:00:17,220
it on screen, I have my state value when in stores and I have my tourist component so I can use the

3
00:00:17,220 --> 00:00:17,850
props.

4
00:00:17,850 --> 00:00:23,250
I can say towards prop is equal to a towards state value.

5
00:00:23,520 --> 00:00:27,060
And then, of course, in the tourist component.

6
00:00:27,420 --> 00:00:31,380
Well, I would need to deal with my towards prop.

7
00:00:31,380 --> 00:00:31,820
Correct.

8
00:00:32,190 --> 00:00:34,110
So in here, all the structures right away.

9
00:00:34,950 --> 00:00:42,060
I'll say my thoughts and let's work on our return, so instead of heading to we're going to go with

10
00:00:42,420 --> 00:00:47,430
S. four here and I would want to set up my title first.

11
00:00:47,670 --> 00:00:54,660
So there with the class of title and then inside I'm going to type heading to and inside I'll type our

12
00:00:55,500 --> 00:00:57,330
horse like, so let's say it.

13
00:00:57,810 --> 00:01:04,980
And after that, I'm going to add a little bit of underline to sit there with a class of underline beautiful.

14
00:01:05,370 --> 00:01:10,640
And then right next to this div, I also want to iterate over my thoughts.

15
00:01:11,010 --> 00:01:17,550
So let's place a div and then let's go with torse, then map and then of course each and every item

16
00:01:17,550 --> 00:01:19,630
will be represented by some kind of parameter.

17
00:01:19,920 --> 00:01:26,640
So in my case I'm going to go with Tau and since I have the to work component already imported in the

18
00:01:26,640 --> 00:01:31,270
torch component, I can simply say return and then the third component.

19
00:01:31,530 --> 00:01:33,390
Now I still need the key.

20
00:01:33,750 --> 00:01:39,450
And if you check out the API, you'll notice that each and every item has the array.

21
00:01:39,690 --> 00:01:41,740
So this is exactly what I'm going to use.

22
00:01:41,970 --> 00:01:45,150
So I'm going to go with Tau, Heidi, since we have the list.

23
00:01:45,480 --> 00:01:49,950
And then in order to speed this up, I will set up right now.

24
00:01:49,950 --> 00:01:56,340
And by the way, not there is a bit of an issue where I need to place my return inside here.

25
00:01:56,370 --> 00:01:58,470
So I forgot about the curly braces.

26
00:01:58,770 --> 00:02:00,210
Then we're setting up the return.

27
00:02:00,420 --> 00:02:06,970
And then in order to speed this up, in order for me to get all the properties that are in store, whether

28
00:02:06,990 --> 00:02:14,630
I design the name in four image and all that good stuff, I'm just going to go with Object Operator

29
00:02:15,030 --> 00:02:18,270
where I set up the curly braces, da da da and mentor.

30
00:02:18,510 --> 00:02:25,890
And what that means that in the to work component I'll have access to all the properties that are in

31
00:02:25,890 --> 00:02:27,780
my object, so I'll save it here.

32
00:02:28,410 --> 00:02:32,440
And then at the moment I can see that I have five single top components.

33
00:02:32,730 --> 00:02:33,100
Why?

34
00:02:33,210 --> 00:02:36,030
Well because my list has five items.

35
00:02:36,270 --> 00:02:45,460
And then as far as the door, the moment it just returns, adding to with a text of single to work component.

36
00:02:45,750 --> 00:02:54,060
So let's start first by the structuring all the props, which are properties from the object I'm looking

37
00:02:54,060 --> 00:03:00,270
for any more for image, looking for info and then price as well.

38
00:03:01,020 --> 00:03:02,560
Name would be good too.

39
00:03:03,060 --> 00:03:07,910
So I've got all these things and then I'll need to work on my return.

40
00:03:08,400 --> 00:03:11,100
So instead of having to it's going to be article.

41
00:03:12,290 --> 00:03:15,710
Then we're going to remove this text right away.

42
00:03:16,110 --> 00:03:24,250
Yes, so let's take your class name, single or Alexa, and then we're going to set up a image here.

43
00:03:24,260 --> 00:03:26,180
We're looking for source.

44
00:03:26,180 --> 00:03:33,650
And of course, as far as the value we pass and the image property that we're getting for every object

45
00:03:33,920 --> 00:03:37,140
and for the alternative, let's type the name, of course.

46
00:03:37,540 --> 00:03:43,040
Now, right next to the image, I would want to set up a footer element.

47
00:03:43,340 --> 00:03:50,540
And inside there, there's going to be a dev with a class of your info, Weichsel.

48
00:03:50,780 --> 00:03:58,940
And inside here, let's go with heading for, um, let's display the name and should see all the images.

49
00:03:59,820 --> 00:04:00,930
As well as the name?

50
00:04:01,360 --> 00:04:05,760
Well, right next to the name, I would want to go with another heading for now.

51
00:04:05,790 --> 00:04:11,900
This one will have a class name and we're looking for here the tour price.

52
00:04:11,910 --> 00:04:13,800
So that's the name of my class.

53
00:04:14,190 --> 00:04:19,700
And let's acknowledge one here, of course, and let's target the price problem.

54
00:04:20,160 --> 00:04:25,130
And there is now we should see the title as well as the price.

55
00:04:25,230 --> 00:04:32,640
And I think I can close the console for now and let's work on the paragraph because I would want to

56
00:04:32,640 --> 00:04:33,690
display all the text.

57
00:04:33,720 --> 00:04:38,820
Now, don't worry, of course, we will work on the toggle functionality a little bit later.

58
00:04:39,120 --> 00:04:42,660
But for now, let's just go with paragraph and say the paragraph.

59
00:04:42,660 --> 00:04:44,660
I would want to display my info.

60
00:04:44,940 --> 00:04:47,790
So essentially a description of my door.

61
00:04:48,150 --> 00:04:55,230
And then as the last thing, there's going to be a button that allows us to remove the door from the

62
00:04:55,230 --> 00:04:55,510
list.

63
00:04:55,830 --> 00:04:57,980
So for now, we're just going to go with button.

64
00:04:58,200 --> 00:05:03,830
I will add a class name of delete on hyphen between now.

65
00:05:03,850 --> 00:05:08,070
I won't set up the unclick yet and let's just say not interested.

66
00:05:08,730 --> 00:05:10,050
That is going to be the text.

67
00:05:10,050 --> 00:05:12,020
We save it Amatus.

68
00:05:12,060 --> 00:05:17,970
Now we have everything, we have the image, have the name of the store, we have the price as well

69
00:05:17,970 --> 00:05:21,160
as the info and button that says not interested.

70
00:05:21,540 --> 00:05:26,310
So if we navigate a bigger browser window, of course there is.

71
00:05:26,340 --> 00:05:29,670
Now I have all Minotaur's as a side note.

72
00:05:29,670 --> 00:05:31,580
Of course, I have massively zoomed in.

73
00:05:31,890 --> 00:05:36,160
So if you put down a percent, you should see something like this.