1 00:00:00,330 --> 00:00:05,310 Not bad, not bad ones, we've got overreact I comes out of the way, of course. 2 00:00:05,340 --> 00:00:07,380 Let's focus on our project. 3 00:00:07,740 --> 00:00:12,180 We won't need it next year because all the styles are already there. 4 00:00:12,570 --> 00:00:15,830 And then, of course, I don't need also this particular icon. 5 00:00:16,230 --> 00:00:20,590 This was just to showcase all the actual library works. 6 00:00:21,010 --> 00:00:27,720 So let me save it and then let's start with a general return where instead of the chair, we're going 7 00:00:27,720 --> 00:00:28,710 to go with mine. 8 00:00:29,130 --> 00:00:34,140 Then inside of the main, I would want to set up my container and title. 9 00:00:34,620 --> 00:00:39,870 So let's go here with Container Dave and then also with a dare with a classic of title. 10 00:00:40,200 --> 00:00:48,780 And then we're going to go with having to an hour or five years like so and then let's add the nice 11 00:00:48,780 --> 00:00:49,880 underline as well. 12 00:00:50,160 --> 00:00:52,410 So underline, underline. 13 00:00:52,890 --> 00:01:00,420 And then once we've got that, then still within the section, by the way, you know what the container 14 00:01:00,420 --> 00:01:02,220 should have been section like. 15 00:01:02,220 --> 00:01:04,170 So so let's set this up as a section. 16 00:01:04,380 --> 00:01:08,490 So still within a section, but not inside this title div. 17 00:01:08,790 --> 00:01:14,850 I'm going to go with my review component, so I render my review component and at the moment it should 18 00:01:14,850 --> 00:01:17,240 just say review component. 19 00:01:17,250 --> 00:01:24,330 And of course now I can navigate to the component and get busy building our functionality. 20 00:01:24,600 --> 00:01:25,710 As far as the imports. 21 00:01:25,740 --> 00:01:31,380 We're looking for people coming from the data file and we'll take a look at it in a second. 22 00:01:31,590 --> 00:01:37,380 And then, like I said, the font awesome icons coming from the React Icons Library. 23 00:01:37,620 --> 00:01:40,740 So we have the Chevrons as well as the quote. 24 00:01:40,760 --> 00:01:41,130 Right. 25 00:01:41,640 --> 00:01:47,150 And then before we start working on our return, let me just show you what is in the data. 26 00:01:47,430 --> 00:01:48,960 Again, we have the array. 27 00:01:49,200 --> 00:01:49,980 I am named it. 28 00:01:49,980 --> 00:01:50,760 It reviews. 29 00:01:51,030 --> 00:01:53,000 I export it as default. 30 00:01:53,160 --> 00:01:56,430 So of course when I import, I can call it however I would want. 31 00:01:56,760 --> 00:01:59,640 And then again, I have multiple people. 32 00:01:59,850 --> 00:02:04,310 Each person is represented by the object where I have the idea. 33 00:02:04,680 --> 00:02:07,500 I have the name, job, image and text. 34 00:02:07,830 --> 00:02:16,090 And of course we'll need to figure out well, how we can display them one by one where we're not rendering 35 00:02:16,090 --> 00:02:16,980 the list in this case. 36 00:02:17,400 --> 00:02:23,940 So I would want to access them and then figure out some kind of way where I can go back and forth as 37 00:02:23,940 --> 00:02:26,060 far as my right is concerned. 38 00:02:26,430 --> 00:02:30,420 So in the app we have the review that is rendered. 39 00:02:30,420 --> 00:02:35,340 Of course, now we need to go back to the review and I think I can close the app because at the moment 40 00:02:35,340 --> 00:02:38,880 it is just confusing all but so we have to review. 41 00:02:38,880 --> 00:02:39,450 Beautiful. 42 00:02:39,870 --> 00:02:45,420 And then in here, let's start by setting up some kind of state value. 43 00:02:45,690 --> 00:02:48,630 So that is going to be my index over here. 44 00:02:48,930 --> 00:02:57,600 And this is exactly what I'm going to call a second index is equal to a set index now as far as the 45 00:02:57,600 --> 00:02:58,350 default value. 46 00:02:59,350 --> 00:03:00,380 I'm going to go with zero. 47 00:03:00,400 --> 00:03:00,730 Why? 48 00:03:00,760 --> 00:03:08,860 Well, because arrays are zero indexes based on by default, I would want to showcase the first person 49 00:03:09,070 --> 00:03:09,850 in my. 50 00:03:10,450 --> 00:03:12,100 Hopefully that makes sense. 51 00:03:12,490 --> 00:03:13,850 And now let's think about it. 52 00:03:14,260 --> 00:03:21,280 So we have this people right now, if you want, you can control it and you'll see exactly what I'm 53 00:03:21,280 --> 00:03:21,790 talking about. 54 00:03:21,830 --> 00:03:24,910 Now, I'm going to do that on a bigger screen and there it is. 55 00:03:24,940 --> 00:03:29,620 So this is my right now, like I said, each person is an object. 56 00:03:30,010 --> 00:03:35,500 So what I would want to do when I'm setting up the return, I right away would want to access these 57 00:03:35,500 --> 00:03:36,040 properties. 58 00:03:36,490 --> 00:03:38,470 But in this case, I need to be very specific. 59 00:03:39,340 --> 00:03:45,070 Where, again, I'm not rendering the whole list, I would just want to render one person so what I 60 00:03:45,070 --> 00:03:51,960 could do is access these properties using the structuring from the people array. 61 00:03:52,210 --> 00:03:55,660 But then I need to be more specific which item I'm looking for. 62 00:03:55,870 --> 00:04:02,290 And since I would want to display the first item and arrays are zero in next base, I could use this 63 00:04:02,290 --> 00:04:02,980 state value. 64 00:04:03,340 --> 00:04:03,830 Correct. 65 00:04:04,120 --> 00:04:09,910 So what we could do is say const and then I'm looking for name, I'm looking for a job, I'm looking 66 00:04:09,910 --> 00:04:12,160 for the image as well as the text. 67 00:04:12,400 --> 00:04:14,460 And that is coming from people. 68 00:04:14,560 --> 00:04:14,960 Right. 69 00:04:15,460 --> 00:04:18,160 And then I'll use my index. 70 00:04:18,490 --> 00:04:21,760 I'll say not zero, not one, not two. 71 00:04:22,030 --> 00:04:24,520 Even though technically I could have done that. 72 00:04:25,150 --> 00:04:28,300 But the thing is, I don't want to have this hardcoded. 73 00:04:28,660 --> 00:04:36,460 I want to set us up as index so that we as this value changes also, I don't see a different person. 74 00:04:36,760 --> 00:04:37,930 Hopefully that makes sense. 75 00:04:38,150 --> 00:04:44,050 So I'm going to all these properties out of the first item in the people. 76 00:04:44,100 --> 00:04:44,430 Right. 77 00:04:44,740 --> 00:04:50,790 And as this is going to be changing, as my index value will be changing, so will be the person that 78 00:04:50,800 --> 00:04:52,830 I'm accessing in the array. 79 00:04:53,670 --> 00:04:58,830 And with that in place, of course, now we can set up our return zone here, I'm going to go with the 80 00:04:58,830 --> 00:05:02,180 article and line inside of the article. 81 00:05:02,670 --> 00:05:04,940 We're going to go with review. 82 00:05:05,430 --> 00:05:07,200 So there's going to be there eventually. 83 00:05:07,200 --> 00:05:13,050 But for now, we'll just add a class name of a review show. 84 00:05:13,410 --> 00:05:20,730 And then inside of this article, we're going to go there with the class of image container and let's 85 00:05:20,730 --> 00:05:22,460 just showcase that image. 86 00:05:22,470 --> 00:05:24,360 So image for the source. 87 00:05:24,720 --> 00:05:27,360 I'm going to use the image that I'm actually seeing here. 88 00:05:27,720 --> 00:05:33,170 So I'm going to say here, image now for the alternative was just display the name. 89 00:05:33,780 --> 00:05:35,010 So that is going to be name. 90 00:05:35,190 --> 00:05:40,400 And also, I would want to add a little bit of styling here where I'm going to go with class name and 91 00:05:40,590 --> 00:05:43,310 person and then hyphen HMG. 92 00:05:43,710 --> 00:05:44,640 So let's save it. 93 00:05:45,000 --> 00:05:51,060 And then we should see our container and we should also see our first person. 94 00:05:51,360 --> 00:05:53,100 And I'm going to do this multiple times. 95 00:05:53,100 --> 00:06:00,300 But just so we all are on the same page notice as I'm changing its value, which eventually we'll do, 96 00:06:00,300 --> 00:06:01,290 of course, dynamically. 97 00:06:01,680 --> 00:06:06,630 Also, the person changes because of course, in this case, index is number two. 98 00:06:06,840 --> 00:06:09,590 So now I'm accessing the third person. 99 00:06:09,720 --> 00:06:11,850 Hopefully that makes sense. 100 00:06:12,180 --> 00:06:15,660 And then right next to the image, we're going to go down here. 101 00:06:16,080 --> 00:06:22,290 We're going to add a class name of quote unquote and then hyphen icon. 102 00:06:22,590 --> 00:06:28,300 And then instead of the span, let's go with one of our icons and we're looking for, quote, right 103 00:06:28,350 --> 00:06:30,450 icon, what's displayed. 104 00:06:30,660 --> 00:06:31,520 And there it is. 105 00:06:31,530 --> 00:06:32,700 Now we have the icon. 106 00:06:33,210 --> 00:06:35,970 Then there's just going to be some info. 107 00:06:36,270 --> 00:06:37,890 So we're right next to this there. 108 00:06:38,400 --> 00:06:45,450 We're going to go with heading for and we would want to add a class name and class name will be Arthur 109 00:06:45,870 --> 00:06:46,260 again. 110 00:06:46,260 --> 00:06:51,480 Usually I try to avoid adding too many classes, but in this case there was no other way. 111 00:06:51,870 --> 00:07:00,780 And I'm looking for the name here, so I'm going to go with a name like so and once we've got that. 112 00:07:01,860 --> 00:07:08,910 Then we can work on job and info, so let's go with the paragraph, let's out right away, class name 113 00:07:09,390 --> 00:07:15,360 of job and then of course, I would want to access that property that is coming from my object. 114 00:07:15,540 --> 00:07:19,080 And then one more paragraph, and this one will have a class of info. 115 00:07:19,350 --> 00:07:21,350 And then we're looking here for the text. 116 00:07:21,870 --> 00:07:23,160 So these are the values. 117 00:07:23,400 --> 00:07:25,920 And of course, let's set up our buttons. 118 00:07:26,160 --> 00:07:31,380 Now, at the moment, there's going to be no functionality, but at least those buttons will be there. 119 00:07:31,680 --> 00:07:39,150 So we go with them with a class of button container like and then inside of this container we go with 120 00:07:39,160 --> 00:07:43,160 button and then instead of this button, we just go with Shivram. 121 00:07:43,350 --> 00:07:46,710 So F.A.A. and Chevron on the left. 122 00:07:47,070 --> 00:07:51,740 Now, I also would want to have a little bit of styling here, and I'm going to go here with the class 123 00:07:51,750 --> 00:07:54,000 name of priv button. 124 00:07:54,000 --> 00:08:01,710 So prev hyphen b10 let's say it, we should see this button over here and now it's copy and paste and 125 00:08:01,710 --> 00:08:03,450 we're just going to have to change this around a little bit. 126 00:08:03,720 --> 00:08:04,680 So we want to. 127 00:08:05,670 --> 00:08:11,820 Now, the second button, of course, is going to be the next button than as far as the icon is going 128 00:08:11,820 --> 00:08:12,810 to be Chevron. 129 00:08:12,820 --> 00:08:13,290 Right. 130 00:08:13,650 --> 00:08:17,140 And the last one will be a random button soon here. 131 00:08:17,160 --> 00:08:22,800 Let's go with a random and then hyphen B10 and we're not going to display the icon here. 132 00:08:22,980 --> 00:08:24,420 We'll just say surprised me. 133 00:08:25,080 --> 00:08:27,540 And latish, once we save it. 134 00:08:27,810 --> 00:08:30,270 This is the look that we're shooting for. 135 00:08:30,480 --> 00:08:33,780 Now, the one thing that I would want to do is place it outside of the div. 136 00:08:33,960 --> 00:08:40,470 So the button container and then of course the button, the last one, the random one will be on a separate 137 00:08:40,470 --> 00:08:40,740 line. 138 00:08:41,070 --> 00:08:43,210 So that's our basic return. 139 00:08:43,500 --> 00:08:51,030 So now, of course, we just need the functionality where as we're changing the index, also we display 140 00:08:51,240 --> 00:08:52,170 a different person.