OK, and once we can handle the errors now let's work with our list, the one that we're getting back
from the new values.
So right after the colors, I'm going to go with set list function.
And of course, I'm going to update my state value list to the colors.
Now, of course, it's not going to be an empty array.
It is going to be an array of colors.
And if you still need to cancel, like, please do so.
But I already did that in the last video.
So now of course, we will scroll down and where we have the section of colors, I would want to iterate
over those colors.
So I'm going to go with my list.
So my state value and mapping over our look for two things.
I would want to get the color.
That's the name that I'm giving for every item that I have in my list.
And also we will need a index.
Now, as far as the return, I'm going to go with a single color component or single color component.
And then since there is a list, I still need to have my key.
So I'm going to go with that and remember how we passed in all the property from the item we used objects
proper where we go with DataDot and then whatever here in the item.
And lastly, I also would want to pass in the index.
That's why I'm going to set up index prop and I will be equal to my index.
And you'll see in a second why we're doing that now, just because I would want us to be on the same
page.
I'll also council log the color because that would want you to understand what values are we're looking
for as far as the single color.
So that should do it for now in the objets and remaining of the work we'll do in our single color.
So let's navigate there.
We have our single color component and there's three things that we're looking for.
We're looking for our RGV.
We're looking for the weight.
I'm on the index, so these two are coming from that item are coming from that color, and then, of
course, index is the one that I set up.
So let me save.
And we're now getting to a bigger no online go with hashtag.
And then again, the fastest one will be two to two and then notice in my console.
So this represents that item.
And like I said, what we're looking for in a single color is this RGV, which is the Narey orders.
It is the color values here and then also the wait.
So wait.
I'm just going to display, well, what is the actual percentage and again, we'll talk about these
percentages at the very end because I'll show you with different values.
So this is going to be displayed the weight.
And as far as the RGV, well, I also would need it because I would need to set it up as my background.
So in order.
This is the actual color.
So the reason why I'm looking for this RGV be prop that was passed in from the color well, because
I would want to set my background to my single color component.
And of course, index is an index which will use a little bit later.
So hopefully that makes sense.
We have an object with these properties.
We're only interested in RGV, which is an array, and then the weight, which is just a value.
And once we have that in place, of course we can navigate back to a single color and start working
on our return.
Now, I'm going to start by setting up right now my state value, which is going to be alert, which
is going to be displayed once we copy something to the clipboard.
So at the moment, again, it's not going to do much.
There's just going to be a state value for alert and set alert.
And we're going to go use state and by default alert will be false.
So that's the way it is.
And then since I would want to set up my background color, I will have to somehow turn that RGV the
array into a string because we all use inline CFS to set it up as a color, because like I said, what
I would want is for all of these little squares, I would want the color mãe to match whatever I have
in the RGV.
So in here when we could do is Konstantine BCG.
So some kind of value and then RGV.
That is my right.
I would want to join it into the string and I would want to join it with Comus so every item will be
separated by the comma.
So of course if you want to log BCG, you will see that.
And by the way, of course we need to have some kind of value here.
You'll see that we have these RGV values and this is exactly what we're looking for.
So now, of course, let's work on our actual return.
So instead of console logging, I'm going to go here with an article I would want to add a class name
of color, but later there's going to be one more functionality that I'll add here.
That's why right away, when I'm setting up the class name, I'll set it up here as the template strand.
Again, the moment doesn't make sense, but it will make sense in a second when we start checking our
index.
So let me just add here a color.
And then like I said, I would want to add also the inline style because I would want to have that background
color.
So in here I go with style and I remember we needed to go back to the JavaScript.
So we have double Cali's.
And on the property that I'm looking for is background and color, and that is equal again to my template
string.
So let's go with Plectrum here and let's say that I would want to access the BCG, so I'll start with
RGB.
So of course that is the CSF property or I guess volume more correctly.
So RGV function, um, inside of this AGIP function I would want to pass in the BCG value.
So that string that I got from my right.
And once you say, of course you will have an error because it should be here, a colon, because of
course it is a JavaScript value.
So now of course, if I add my favorite color, the orange one notice you'll get these squares again.
Each and every object has the RGV in the RGV.
I have those RGV values.
And then what I could do is set up inline style.
So the class name for color is just going to give general styles.
But then that inline standard background color will make sure that each square has that unique color.
Notice how I'm going with background color and I invoke the RGV function and then I pass in the value
that I'm getting from the R.G. be.
All right.
OK, now with this in place, what we could do is set up the weight.
So I would want to showcase what is the percentage here.
And that's why instead of the article we go with, paragraph will add here a class because it has a
little bit of styling where we're going to say percent and then value.
And instead of the paragraph, let's go with wait, wait.
And that will be equal to zero percent.
So essentially I'll just add here percent as well, let's say it.
And yep, it's going to be a little bit annoying where we have to keep on adding the values.
I mean, probably I could have set it up as default, but I'll just live with that.
So now this year now of course I have all these percent values as well.
And then it's interesting, I would want to display the hex color so I wouldn't want to display the
RGV and I'm getting instead I would want to display Hex and I'm going to go with class name and color
value.
And prior to that I use this RGV to hex.
So if you navigate to utils, you'll find a function that I got from Stack Overflow.
And as I said, this is one of those cases where I'm not going to go over the function because I would
want you to feel comfortable using it without fully understanding what is happening.
Just understand that this is a function that I just Googled How to convert RGB to Hex.
And this is what I've got from this stack overflow where we pass in the values and at the end it spits
back the R B to hex, meaning I pass in RGV values and I get back the hex and of course an important
function in the utils.
Now however, as I'm recording, I also notice something that I missed while I was building where if
I open up my object, there's also a property of X..
So let me try this one out.
If it doesn't work, it doesn't work fine.
Then of course we can use our RGV tracks.
If it doesn't work beautiful, then we'll just speed this up.
So I'm going to try to access my hex on the inside of the paragraph.
I'll just display the hex color, so let's see whether it works again.
I'm going to go with my F one five zero five and unfortunately I'm not able to display this way.
So let's try two things first and try to use this function.
And the way this function works is we need to pass in the separate values.
So I cannot just grab the RGV, which is my right, and then pass it into my RGV tracks.
That's why.
Let's try this way.
So we're going to go with Hex and we're going to go with our RGB tracks.
That's our function.
And then I need to use this proper word instead of passing in the hall.
All right, I'm going to go with that and then remember that R.G. be all right.
Correct.
That's what I'm passing in.
So now let's see whether that works.
And of course, I have a big, fat complaint because I use the same name.
So let me call this hex color because I'll still try to do it one more way.
So hopefully this works.
So hopefully this function works.
I mean, it should work.
So we're going to go with F one five zero two five and there it is.
Now I'm displaying that X color.
So that's good.
That means that this way for sure will work.
So now let me try to set it up a little bit differently in the app just where we are essentially using
the hex color that the library provides.
So this is going to be a nice fallback if something goes bananas, if I'm not able to access that color.
But I would want to try it one more way where at the moment I'm logging the color, but I'll change
this around where I'm going to say that there's going to be some kind of color and that is equal to
a color.
And then Hex and I set up my variable right now.
And of course, I can pass it in.
And you know what?
I'm just going to skip this part.
Sorry, a little bit of detour.
I'm going to say hex color.
So that is my problem.
And the reason for that is because I'm already looking for it and my single color and I'll set it equal
to a color and an X.
And now let's try to come to a log in a single color whether we have access to a X and line color and
let's see whether it works again.
I'm going to go back to the same color and I can access to this one, which is really cool.
So now, of course, we have two ways how we can access that.
You can either use the function.
Or we can get the value that the library provides.
So instead of looking for hacks, we're going to go for X color.
Now, I'll leave this for your reference, just in case you need.
Just keep in mind that once we have this set, of course, we can still display the hex color and narrative's.
Now, let's keep on going.
And one thing that I would want before we start working on the alert and before we start copy the value
to the clipboard.
I would also want to change the color value depending on the tent audition, because notice in here
I can clearly see my color value.
But once I get to a darker shades, of course it is harder and harder to see.
So it wouldn't be nice if at the base color we would switch where in the beginning we have the dark
values and then starting from the base will have the lighter values for the percentages as well as the
hex color.
And the only thing we need to do is check that index.
That's the reason why in The Objets, I also passed in the index and in the single color.
I'm just going to say, hey, listen, if the index has the value bigger than 10, because that's where
I know is my base, then just add a different class.
So that's why in here we were setting up everything in the template string where now I can simply say
check the index if the index is bigger than 10.
Then also I would want to add one more class and that class is color light.
What just make sure that the paragraphs that I have are just going to be in lighter color.
I'm going to navigate here and then I'll try with my color.
And you should see that the first ones have the darker color and the moment index gets bigger, and
then then of course, we have lighter colors because that way, of course, we can see it a bit better.
And also, you know what?
I think what we could do is add here a hashtag thing that is going to make a little bit more sense or
you know what?
We can construct a string over here that will have that hashtag because we'll have to copy and paste
that value.
So let me double check quickly something.
Let me see what I'm getting back from the function.
I think from the function, the RGV function I was getting right away, the color.
And of course, in here they are so submit and yet notice.
So if I'm using that stack overflow function, I right away have the hash tag a front.
Now, if I'm using that hex color, then I don't.
So it would be an awesome time to construct a new string over here because I will need to use that volume.
So let me go here with CONSED and then I'm going to come up with a variable name, which is going to
be hex value and that is equal to a template string.
And in here we're going to go with interpellation and I'm going to add a hash tag and then we'll just
place a hex color.
And of course, instead of hex color, we're just going to go for hex value.
So once we save, we should see the hashtag, of course, where we have the hex color.
And also what's really cool is that we'll copy this back to the clipboard.
So right away, have that hash tag as well.
Again, if you want with Hex, if you want with the function, you're right away, the hash tag.
But since I went the library route where I was getting the hex color from the library, that's why we
had to do it manually.
So in here, let's try it out one last time.
And there it is.
Now, of course, we have the hex color.
So last thing that I want is functionality where we can copy the values to the clipboard.
And once we click on the square, we also have this little alert which has copied clipboard and after
three seconds it disappears.