‫So let's now finish the developer profile card
‫in the second coding challenge of this section.
‫So we are still building this developer profile card here
‫but now we will do it
‫in a slightly different and a little bit better way.
‫So let's come over here just
‫so I can show you what I want to do now.
‫And so first off, we now have an array of skills.
‫And so in this array we have one object for each skill.
‫So basically we will now create one
‫of these skills here for each of these objects.
‫Or in other words,
‫we're going to render a list of skills, right?
‫So I want you to create a similar array.
‫So it's all your skills, then the level
‫and also a color for each of these skills.
‫So that's your first task.
‫And then you simply loop over this list
‫and display one skill for each of them.
‫Now here the level can be one of three different choices.
‫So either intermediate, advanced or beginner.
‫And so based on this level
‫I then want you to display one of these emojis.
‫So going back here, this is the emoji for the advanced,
‫this is for the intermediate,
‫and this is for the beginner level.
‫So basically you will conditionally set this emoji
‫right here. And yeah,
‫that's basically all I want you to do for this challenge.
‫So please go ahead and pause the video now
‫and I see you back here in a minute.
‫Okay, so let's come here to our skill list
‫because that's where most of the difference will be.
‫So here what we did was to manually create one
‫skill component for each of these skills, right?
‫But now we will get rid of all of this
‫because now we will create a list of skills.
‫So we enter JavaScript mode
‫and then we simply take our skills and use the map method.
‫So just like we did with the pizzas in our previous project.
‫So here in this map, each element of the array is one skill.
‫Of course, it could be any other variable name, but anyway.
‫So for each skill, we want to create one skill component.
‫And let's first close it to avoid the error
‫and then we can pass in the props.
‫Now, in the pizza project,
‫we actually passed in the entire object as a prop, right?
‫But here, just for this to be a little bit different
‫let's actually pass them in one by one.
‫So the skill is going to be skill dot skill.
‫So that's a lot of skills right there
‫like four times in a row.
‫Then next, let's pass in the color.
‫So that's skill dot color.
‫And then finally we also have the level.
‫So that's at skill dot level.
‫Like,
‫that's it.
‫So you immediately see the difference down here
‫because now we have six skills.
‫So all the ones that are in the array
‫but we don't have the emojis yet
‫because previously we were actively passing in
‫an emoji prop, but now we just pass in the level
‫which we then want to convert to an emoji.
‫Right? Now, before we move on here
‫let's actually de-structure the props just
‫like we did also in the project.
‫So that's skill, color and level, and again
‫this is so much useful like this because now
‫we immediately know which data this component here expects.
‫And of course it also makes our code
‫in here a little bit nicer.
‫So now we don't have the emoji variable here, of course.
‫And so instead, let's use the level for now.
‫Now, but now again, we need to convert that.
‫So how are we going to do that?
‫Are we gonna do conditional rendering
‫or are we simply going to conditionally set the text here?
‫Well, I think it's best to just actually
‫set the text conditionally.
‫Now, we cannot use a ternary operator because we
‫don't have just two options, but three.
‫So it can be advanced, intermediate, or beginner.
‫And so we actually are going to use now the end operator.
‫So let me show you what I mean by that.
‫So here, let's say level.
‫If it equals beginner,
‫then well let's just copy the emoji here.
‫It's like this baby.
‫Then here the content should be this.
‫And so there it is for this one where I'm still
‫at an advanced, or actually at a beginner level.
‫And so now let's just use three of these
‫Right? And that's not a problem at all
‫because these three are going to be mutually exclusive.
‫So only one of them will get applied.
‫Intermediate and advanced.
‫And now let's just grab the emojis here.
‫This one for advanced
‫and this one for intermediate.
‫And there we go.
‫So here we conditionally set some text this time
‫not using the ternary operator,
‫but this time using the end operator
‫and leveraging the property
‫of short circuiting that this operator has.
‫So for example, in this first one here
‫level equals beginner is false.
‫And so then here false will be the result of this
‫which does not get rendered.
‫Then the same here
‫and then level equals advanced is actually true.
‫And so then the result of this operation will be this one.
‫And so in the end, this is the content that we see here.
‫Now, right?
‫Now you could have done it also in different ways.
‫There would've been no problem at all.
‫What matters is that somehow you got it to work.
‫It's not important how you did it.
‫Everyone can have different solutions here.
‫That's just completely normal.
‫Okay, and so now that's actually a wrap.
‫So we finished this section, and so once again
‫congratulations for reaching the end
‫of this first fundamentals of React section.
‫You already learned a lot
‫and so you can be proud of yourself.
‫Next up, we are going to learn about the concept of state
‫and of handling events so that we can finally
‫build some apps that are truly interactive.
‫So that's going to be amazing
‫as we will build our really first useful project.
‫So a project that will not just display some data in the UI
‫but with which we can also interact.
‫So that will be, again, a lot of fun.
‫And so don't waste any time.
‫And so if you have some time left
‫then let's immediately move on there.