And reflect.
And this is again going to be an arrow function.
Now this is going to have a left keyword, and this will have a lot of random index.
Now, this random index is going to be equal to Matt.
The floor again gets what is generating random value.
Not random.
And times.
Sixty.
OK, so we have generated it random value, you know, we need to generate two other values.
So right off the floor.
Maybe creating another left, and this time we were targeting our court.
As well as our other.
Which is going to be equal to this not sad state.
This two state.
Not court data.
And then said that it is going to have a random index because we want any did any of.
Are courts that is present in record store data to be displayed?
So we are presently configuring to handle Flick Matter, which is going to be activated on every click
know a semicolon date of that is.
Now let's create a contest and.
It's fun to color.
And this concert is going to be equal to this.
Not that I know I'm going to.
So right after this, we have created a flick method that is going to be rendered on every click.
So right after this, we would want a game changer, document style as well body colors of a document.
So we would be copying this to a statement because this is what we are going to paste it here.
So this copy document about body terracotta and paste them both, the statement said.
We need a color statement.
So now we have created up everything.
Now we need to assign it.
So let's just use this or set it to assign it to our state.
So this does it state an insider's view to signing up for people to court our third equal to or also
that we are receiving from our API?
And the coordinator will be assigning of color, which is identical to color.
OK, so we have set it up statement.
Now the question that lies with us is that where we do, we need to call a first court today because
we have given it a function worthy what we need to even call it.
And we're be a life cycle hook for that.
And that is the component that is so that it is rendered off.
The screen has been displayed.
So we'll be using component amounts or component the amount.
And after component amount will be calling up a fish caught in it.
So let's just paste this.
Not.
First records.
Now there's one more there, but in fact, I think that we can do in the combat zone, and that is if
that is if we want to check that weather codes, data is having data in it.
For example, if we have loaded our data previously and we do not want to do that same process again.
So we would be just checking up.
We'll be taking a if statement that we want to check with the data.
This data is not good studied or not, so let's just give it a if they start state.
That quotes data.
If this starts in local state, I don't lend.
Is greater than zero, then we do not want it to actually go fetch goods.
So if this is the case, then what we want is that we just won't do it on.
And if not, then we want to call up our data.
So, I mean, fetch goods.
So this is all settled up.
We have handle random random color that is going to generate it for us.
And these are the keys and this color which is having a hashtag in it.
Not every time we call list.
And I'm going to give us a different hexadecimal value of a color and this color is going to be assigned
to a button as well as a vaccine.
So not the only piece of code that remains is to add pass this data via drops into a button component.
And so to do that, we'll be passing up four components in this first.
One is going to be in the order and the code and this click property, click property as a color.
So the first thing is going to be a click.
So this click is going to be equal to.
Let's name attendee music.
And it is going to be able to handle.
Click and after this, Hanzlik will give it a collar.
So let's just give it a color, which is going to be equal to a distorted state of color.
And after the color will give it a as a result.
So let's go to court, this is going to be called to the state court.
And after the court will be giving it or other so other.
Would be equal to this note, state the other.
So now let's refer.
You appreciate at work and so we are having our buttons and we're passing all this data.
No time to move into a button buttons and the fact that this button so if we just head back into our
buttons.
So here is about right.
And I told you that will be adding more properties to it.
So just give it a written statement and after this, what are getting is at 80.
And this is going to be able to perhaps totally let me just get props in it.
So we are having our props.
So are we going to have an I.D. that is going to be equal to props?
Totally.
And after this rally, we're going to have another feature that in the background color, so we'll give
it a background.
And it is going to be equal to proper start gala.
Not for this background color.
We are going to give it a last name, which you are already given and click that whenever we click this
function and on click this is going to be equal to hanzlik drops to.
And click.
So we have assigned this handle click method.
Now we need to add one more styling to a style component, and that is going to be equal to the background
color.
So let's just give it.
A background color.
This program is going to be equal to a perhaps not.
Background color.
So, yeah.
We have given it all the properties that we had.
Now let's just take a look and see whether that's functioning or not.