1 00:00:01,080 --> 00:00:05,370 ‫So let's now finish the developer profile card 2 00:00:05,370 --> 00:00:08,913 ‫in the second coding challenge of this section. 3 00:00:10,470 --> 00:00:14,520 ‫So we are still building this developer profile card here 4 00:00:14,520 --> 00:00:15,660 ‫but now we will do it 5 00:00:15,660 --> 00:00:19,173 ‫in a slightly different and a little bit better way. 6 00:00:20,220 --> 00:00:22,020 ‫So let's come over here just 7 00:00:22,020 --> 00:00:24,900 ‫so I can show you what I want to do now. 8 00:00:24,900 --> 00:00:29,900 ‫And so first off, we now have an array of skills. 9 00:00:30,120 --> 00:00:35,070 ‫And so in this array we have one object for each skill. 10 00:00:35,070 --> 00:00:37,260 ‫So basically we will now create one 11 00:00:37,260 --> 00:00:41,130 ‫of these skills here for each of these objects. 12 00:00:41,130 --> 00:00:42,180 ‫Or in other words, 13 00:00:42,180 --> 00:00:46,620 ‫we're going to render a list of skills, right? 14 00:00:46,620 --> 00:00:49,530 ‫So I want you to create a similar array. 15 00:00:49,530 --> 00:00:52,650 ‫So it's all your skills, then the level 16 00:00:52,650 --> 00:00:56,133 ‫and also a color for each of these skills. 17 00:00:56,970 --> 00:00:59,340 ‫So that's your first task. 18 00:00:59,340 --> 00:01:01,890 ‫And then you simply loop over this list 19 00:01:01,890 --> 00:01:04,413 ‫and display one skill for each of them. 20 00:01:05,250 --> 00:01:09,090 ‫Now here the level can be one of three different choices. 21 00:01:09,090 --> 00:01:13,320 ‫So either intermediate, advanced or beginner. 22 00:01:13,320 --> 00:01:14,880 ‫And so based on this level 23 00:01:14,880 --> 00:01:18,780 ‫I then want you to display one of these emojis. 24 00:01:18,780 --> 00:01:22,860 ‫So going back here, this is the emoji for the advanced, 25 00:01:22,860 --> 00:01:24,390 ‫this is for the intermediate, 26 00:01:24,390 --> 00:01:27,243 ‫and this is for the beginner level. 27 00:01:29,550 --> 00:01:33,300 ‫So basically you will conditionally set this emoji 28 00:01:33,300 --> 00:01:35,340 ‫right here. And yeah, 29 00:01:35,340 --> 00:01:38,730 ‫that's basically all I want you to do for this challenge. 30 00:01:38,730 --> 00:01:40,980 ‫So please go ahead and pause the video now 31 00:01:40,980 --> 00:01:43,803 ‫and I see you back here in a minute. 32 00:01:45,810 --> 00:01:50,810 ‫Okay, so let's come here to our skill list 33 00:01:52,140 --> 00:01:55,773 ‫because that's where most of the difference will be. 34 00:01:56,670 --> 00:02:00,630 ‫So here what we did was to manually create one 35 00:02:00,630 --> 00:02:04,980 ‫skill component for each of these skills, right? 36 00:02:04,980 --> 00:02:08,760 ‫But now we will get rid of all of this 37 00:02:08,760 --> 00:02:12,630 ‫because now we will create a list of skills. 38 00:02:12,630 --> 00:02:14,550 ‫So we enter JavaScript mode 39 00:02:14,550 --> 00:02:19,550 ‫and then we simply take our skills and use the map method. 40 00:02:20,040 --> 00:02:25,040 ‫So just like we did with the pizzas in our previous project. 41 00:02:25,080 --> 00:02:30,080 ‫So here in this map, each element of the array is one skill. 42 00:02:31,200 --> 00:02:36,200 ‫Of course, it could be any other variable name, but anyway. 43 00:02:36,240 --> 00:02:41,240 ‫So for each skill, we want to create one skill component. 44 00:02:41,880 --> 00:02:44,580 ‫And let's first close it to avoid the error 45 00:02:44,580 --> 00:02:47,070 ‫and then we can pass in the props. 46 00:02:47,070 --> 00:02:49,020 ‫Now, in the pizza project, 47 00:02:49,020 --> 00:02:53,550 ‫we actually passed in the entire object as a prop, right? 48 00:02:53,550 --> 00:02:56,520 ‫But here, just for this to be a little bit different 49 00:02:56,520 --> 00:02:59,133 ‫let's actually pass them in one by one. 50 00:03:01,770 --> 00:03:06,623 ‫So the skill is going to be skill dot skill. 51 00:03:08,910 --> 00:03:11,460 ‫So that's a lot of skills right there 52 00:03:11,460 --> 00:03:13,263 ‫like four times in a row. 53 00:03:14,790 --> 00:03:18,963 ‫Then next, let's pass in the color. 54 00:03:20,849 --> 00:03:22,980 ‫So that's skill dot color. 55 00:03:22,980 --> 00:03:26,103 ‫And then finally we also have the level. 56 00:03:27,570 --> 00:03:32,130 ‫So that's at skill dot level. 57 00:03:32,130 --> 00:03:32,973 ‫Like, 58 00:03:35,040 --> 00:03:35,873 ‫that's it. 59 00:03:38,310 --> 00:03:41,910 ‫So you immediately see the difference down here 60 00:03:41,910 --> 00:03:44,370 ‫because now we have six skills. 61 00:03:44,370 --> 00:03:46,270 ‫So all the ones that are in the array 62 00:03:48,060 --> 00:03:50,700 ‫but we don't have the emojis yet 63 00:03:50,700 --> 00:03:53,670 ‫because previously we were actively passing in 64 00:03:53,670 --> 00:03:57,270 ‫an emoji prop, but now we just pass in the level 65 00:03:57,270 --> 00:04:01,050 ‫which we then want to convert to an emoji. 66 00:04:01,050 --> 00:04:03,480 ‫Right? Now, before we move on here 67 00:04:03,480 --> 00:04:06,540 ‫let's actually de-structure the props just 68 00:04:06,540 --> 00:04:09,270 ‫like we did also in the project. 69 00:04:09,270 --> 00:04:14,270 ‫So that's skill, color and level, and again 70 00:04:14,970 --> 00:04:17,820 ‫this is so much useful like this because now 71 00:04:17,820 --> 00:04:22,473 ‫we immediately know which data this component here expects. 72 00:04:24,240 --> 00:04:26,920 ‫And of course it also makes our code 73 00:04:27,870 --> 00:04:29,703 ‫in here a little bit nicer. 74 00:04:30,840 --> 00:04:35,160 ‫So now we don't have the emoji variable here, of course. 75 00:04:35,160 --> 00:04:37,743 ‫And so instead, let's use the level for now. 76 00:04:39,330 --> 00:04:43,020 ‫Now, but now again, we need to convert that. 77 00:04:43,020 --> 00:04:45,210 ‫So how are we going to do that? 78 00:04:45,210 --> 00:04:47,430 ‫Are we gonna do conditional rendering 79 00:04:47,430 --> 00:04:51,780 ‫or are we simply going to conditionally set the text here? 80 00:04:51,780 --> 00:04:54,540 ‫Well, I think it's best to just actually 81 00:04:54,540 --> 00:04:56,613 ‫set the text conditionally. 82 00:04:57,600 --> 00:05:00,750 ‫Now, we cannot use a ternary operator because we 83 00:05:00,750 --> 00:05:04,470 ‫don't have just two options, but three. 84 00:05:04,470 --> 00:05:08,190 ‫So it can be advanced, intermediate, or beginner. 85 00:05:08,190 --> 00:05:12,960 ‫And so we actually are going to use now the end operator. 86 00:05:12,960 --> 00:05:15,543 ‫So let me show you what I mean by that. 87 00:05:20,730 --> 00:05:22,743 ‫So here, let's say level. 88 00:05:23,880 --> 00:05:27,813 ‫If it equals beginner, 89 00:05:30,420 --> 00:05:34,260 ‫then well let's just copy the emoji here. 90 00:05:34,260 --> 00:05:35,763 ‫It's like this baby. 91 00:05:37,470 --> 00:05:41,973 ‫Then here the content should be this. 92 00:05:43,920 --> 00:05:47,460 ‫And so there it is for this one where I'm still 93 00:05:47,460 --> 00:05:51,930 ‫at an advanced, or actually at a beginner level. 94 00:05:51,930 --> 00:05:54,550 ‫And so now let's just use three of these 95 00:05:57,600 --> 00:05:59,760 ‫Right? And that's not a problem at all 96 00:05:59,760 --> 00:06:03,150 ‫because these three are going to be mutually exclusive. 97 00:06:03,150 --> 00:06:05,553 ‫So only one of them will get applied. 98 00:06:08,400 --> 00:06:12,480 ‫Intermediate and advanced. 99 00:06:12,480 --> 00:06:14,763 ‫And now let's just grab the emojis here. 100 00:06:17,760 --> 00:06:19,480 ‫This one for advanced 101 00:06:23,033 --> 00:06:25,567 ‫and this one for intermediate. 102 00:06:29,250 --> 00:06:31,110 ‫And there we go. 103 00:06:31,110 --> 00:06:34,710 ‫So here we conditionally set some text this time 104 00:06:34,710 --> 00:06:36,570 ‫not using the ternary operator, 105 00:06:36,570 --> 00:06:38,400 ‫but this time using the end operator 106 00:06:38,400 --> 00:06:40,170 ‫and leveraging the property 107 00:06:40,170 --> 00:06:43,410 ‫of short circuiting that this operator has. 108 00:06:43,410 --> 00:06:46,380 ‫So for example, in this first one here 109 00:06:46,380 --> 00:06:48,450 ‫level equals beginner is false. 110 00:06:48,450 --> 00:06:51,810 ‫And so then here false will be the result of this 111 00:06:51,810 --> 00:06:53,880 ‫which does not get rendered. 112 00:06:53,880 --> 00:06:55,500 ‫Then the same here 113 00:06:55,500 --> 00:06:58,980 ‫and then level equals advanced is actually true. 114 00:06:58,980 --> 00:07:01,977 ‫And so then the result of this operation will be this one. 115 00:07:01,977 --> 00:07:06,090 ‫And so in the end, this is the content that we see here. 116 00:07:06,090 --> 00:07:07,020 ‫Now, right? 117 00:07:07,020 --> 00:07:09,360 ‫Now you could have done it also in different ways. 118 00:07:09,360 --> 00:07:11,430 ‫There would've been no problem at all. 119 00:07:11,430 --> 00:07:14,820 ‫What matters is that somehow you got it to work. 120 00:07:14,820 --> 00:07:16,980 ‫It's not important how you did it. 121 00:07:16,980 --> 00:07:19,320 ‫Everyone can have different solutions here. 122 00:07:19,320 --> 00:07:21,720 ‫That's just completely normal. 123 00:07:21,720 --> 00:07:25,530 ‫Okay, and so now that's actually a wrap. 124 00:07:25,530 --> 00:07:29,280 ‫So we finished this section, and so once again 125 00:07:29,280 --> 00:07:32,460 ‫congratulations for reaching the end 126 00:07:32,460 --> 00:07:36,300 ‫of this first fundamentals of React section. 127 00:07:36,300 --> 00:07:38,250 ‫You already learned a lot 128 00:07:38,250 --> 00:07:41,100 ‫and so you can be proud of yourself. 129 00:07:41,100 --> 00:07:44,820 ‫Next up, we are going to learn about the concept of state 130 00:07:44,820 --> 00:07:47,970 ‫and of handling events so that we can finally 131 00:07:47,970 --> 00:07:51,000 ‫build some apps that are truly interactive. 132 00:07:51,000 --> 00:07:52,890 ‫So that's going to be amazing 133 00:07:52,890 --> 00:07:56,850 ‫as we will build our really first useful project. 134 00:07:56,850 --> 00:08:00,540 ‫So a project that will not just display some data in the UI 135 00:08:00,540 --> 00:08:03,240 ‫but with which we can also interact. 136 00:08:03,240 --> 00:08:05,760 ‫So that will be, again, a lot of fun. 137 00:08:05,760 --> 00:08:08,220 ‫And so don't waste any time. 138 00:08:08,220 --> 00:08:10,590 ‫And so if you have some time left 139 00:08:10,590 --> 00:08:12,483 ‫then let's immediately move on there.