So now that we have configured our dashboard and utils, it's time to move it to a single color logistics
and add code.
But before we do that, just add hashtag before you do see Tweet 3B because that is not a colony.
So just add the hashtag in here and let's see now just moving to a single color.
The G6 and first step is to import you state because that would be using another component.
So to you estate.
And apart from your state, we'll also be needing you as effective.
From the act now, we have imported these two components from a React module, and we'll also be importing
at Origin B from our waters.
My apologies, GBE 2x import Jimmy to Hex.
But I Udall's.
So these are two companies that will be needing in the area now, let's create a component that is going
to be Konst single class.
And since we are receiving data, we props in this from my dashboard.
The structure that.
So inside the parameters, let's structure the values that we're getting.
First of them is the RGV.
Apart from IGB, we are even getting odd weight.
And we are even receiving index from our dashboard and index and then hex color.
Now, add up Arrow and give it a written statement.
Now we need to have.
It should be exclusion or tax going on.
Now we are going to use our state, so let's create a state of alert and a step function that is going
to set our alert, which is going to be equal to your state.
And the initial value is nothing but false.
Because initially, there would be no alerts now that we have configured our first date in our use state
took up that this certainly going to do inside a written statement.
We are going to create an article of class name color.
So let's just create an article.
And give it the last name of.
Well, just put up color, the color that we are getting now inside this color body going to do is that
they give it a dollar and if index, and that should be always greater than 10 and percent and correlate.
Not supposed to be in backpacks, so just select all of this and really putting a backpacks in it.
OK, so we have added back take back techs and all error has vanished.
Now they're here to stay.
And it should be a background color, as you might remember, this is in line Sterling, so give a double
set of curly braces and a background and will give it a background that is going to be equal to.
Um, and in for went.
But before we set up another piece of state in an application.
So let it be like that.
And let's close the article now for the background.
Color will also be setting up another functionality into our app that is going to be equal to let's
after.
You said will be creating a contest and let's name in BCG, and it is going to be equal to the joint,
so basically we are putting up commas in our area.
So you withdraw during and after this.
What I going to do is that we collect RGV, as you might recall, AGP 2x and passing it at X and G B.
And after this, we will be adding another piece and that is going to be const x value.
That is hexadecimal value, which is going to be equal to vertex and hashtag and a dollar sign.
And instead, the dollar will actually basis, and this codebase is going to contain a hex color.
So, no, just hit save and the name that they're going to give out background is this big.
So remove these two and after this, very just give it a background color off again back six GB and.
Then a dollar sign and inside the calibrated but a b c g.
OK, so we have given it to our state.
No, inside this article, we are going to set up two paragraph elements and an alert with a paragraph
element.
So the one of the paragraph element is going to state of the percentile of weight and the other is going
to give it hex values.
And this article is responsible for showing its style and the weight and taste.
So inside this article, we are having two paragraph elements, so let's clear the paragraph element
and give it a class name of present value.
And then just close it, and this is going to hold up our weight.
Text of how much rain that we have and a present sign, and after this paragraph 11, they're going
to have another paragraph element and this is going to be a plus name value that is going to display
our users the value of color.
And just close it now it is going to hold up her value, so just put a color hex value.
Now had save.
Now, even have the property or the functionality not have to copy one particular name of color into
a clipboard, right?
So for that purpose, let's add on functionality into our article and we'll give it to Endlich.
And then again, and our function now inside is out of function.
What we're going to have is that whenever a user clicks on one particular article of color issue or
he or sesion, he or she should be able to copy it.
So just properly basis and we'll be setting alert.
So what this alert is going to state is that OK, the color has been copied in the app, so alert equals
to a true.
And put up a semicolon and will be using the default properties of reactor, navigate to the clipboard
and inside the clipboard to just write text.
And I tax, which is going to be equal to.
Hex value.
Now we have said it about until, like functionality into Iraq now hit safe.
Now, apart from this, what will do is that after the second paragraph element will be setting up a
alert.
So this is, again, a GSX expression and alert.
It does a lot.
Now, if alert and level present again, if alert is true, then what we want is that AP class name
equals to alert should shout out at a user that OK, it has been copied into your application or in
their clipboard.
Alert.
And it would give a shout out that.
Copy.
The clipboard.
Now just hit save, and most of our app is done, except that we have and still used a use effect and
we are yet to export a single color.
So just export for nothing will go to.
OK, so we have exported it now, it's time to use the fact, OK, so use of our talk should only be
called up once when a component is being rendered.
So let's just put up a use it or tuck into place.
So, OK, we'll give it to use the fact.
And it is going to take up, you know, values.
Now, let's create a concert time, which is going to be equal to said time out.
Which, then again, is going to take up a function and it is going to return.
Set alert.
Which is equal to false.
And once it falls.
OK, so right after this, we're just transferred another.
So take them out, said Alert.
It's true and said a lot should be called upon.
Now after this, they will give it to Eddie and put up alert in it.
So where are we making a mistake so that they're getting a landing?
OK, so this should be a inside.
So I'm not.
So what it is going to do is that whenever they are going to call to use effect.
So now we have added everything that I have needs, except the use effect, so that's what we'll do.
So what we do is that we'll be adding you as a factor.
And we wanted to recall every time there's a change in our alert, but before we do that, I just it
should be square brackets, not curly brackets.
So put up spare baguettes in it and let's say and I use it, I took it should be called up every time
we are changing, but I note.
Now what it is going to do, it is going to create a contest and it is going to be like time out.
Which should be cool to set timeout.
And what it should do is that it should change the value of a state.
Offer alert components, so we'll just set alert to vehicle to fires because every time a user clicks
on alert, it should be turned into two.
So that's what we're doing.
We are putting up our alert to be able to fold.
So set alert is be is going to be turned into fold after this.
Semicolon after it.
Now what they're going to do is that, OK, we are getting a learning error and was that because we
haven't put up a.
Out in front of it now after this, what we'll do is there clear time out, so let's just clear timeout
after this.
So I read it on the chin and is going to take the function and this is going to be clearing our timeout.
Clear timeout and what clear?
It's a climate.
So we have added code, OK, it is clear timeout.
So what is missing, why are we getting this error?
Let me just check one more time.
OK, so we are finished with our application.
Let's just take a look at that up.
The.