OK, so now what we'll do is we'll see then that all of the components inside the airport just goes
abroad, just file these detailed file, which is responsible for like rendering all of the components
inside.
Or so what we'll do is we'll go inside.
They are gorgeous and we'll render all of that.
We'll provide some more functionality because more functionality is needed right now that all of the
functionality will be provided inside the Proteus, but we need to install one more package that everything
will do in the Abdelhadi.
So let me close this folder and we'll come to ideas.
Right now, we have just basically like done the simple task of like importing and displaying it.
But that's not we are going to do, actually.
So inside this, what we'll do is we create a new state and the concept that we first introduced it.
Who will do the U.S?
State?
And after that.
What we'll do is.
At this concert.
We'll have the north, we'll have the third north.
And we'll have the U.S.
State.
Now, I'll have some dummy data here.
No, this will be an art object study.
So this will be having some dummy data.
Where did the data is that it will be displaying on the screen now?
Why won't the data?
Because it?
Because I want something to be stored like in the court and that be standard on the screen, I don't
want the screen to be blank and divorced when the user comes to it.
So I don't want it to be like blank complete blank stares I.
I'll be providing some data.
So let me just.
What being based on data?
And inside the borders, only there is some good for basically it is this.
Array of objects.
Let me be straight down.
Yeah.
This is the data.
Now you might be noticing what is this new idea inside the city?
So you guessed it right.
This is an external package.
We will be installing this package.
And now what this package will do, it will give a unique I.D. to each and every different post.
And we don't have to write any other malfunction function to do the generating the I.D. and that is
why we just simply use this.
This package here, as simple as that.
So for that to install this package, you have to just open up your terminal using a control perspective
and let me open another set of service already on that terminal and this one.
What you need to do is you need to just go to the terminal and then you can just redirect to your whole
project.
So I have the project a review.
So after coming here, you can just download and install an extension.
Sorry, that is npm install and then no idea.
This is the name of the extension or not extension Tony Beckett and Beckett, so you can just wait until
and it will take just a couple of seconds and it will be installed on the computer.
So I've already done it so that I am not doing it again when admittedly this terminal minimized.
OK, so that is why I have used this.
No, no I.D. No.
I hope you understood why I view this.
What basically what it will do.
It will just create our own like ID of.
Randomized to the every post, every post will have a unique different ID, and it does what it is actually.
So next, we will be moving on.
Now what we need to do next is that they can throw it in a semicolon.
Now we want to fix this search now.
So it's done.
And also for that, I need a contest and we could get another hook.
That would be the.
So it.
Next.
And that would be said.
Surge extra.
And instead of here that will be used to.
And that is in the spring.
Meaning this search term will be having value whatever the user types.
But as the user is not typing and in the initial fees, it will be having the initial value as an empty
spring.
So that's why we have paused here, empty string because it started to use it.
Whatever the value we put here.
So basically, that is the initial value of this particular, really.
But the initial value for this particular variable is an empty string.
So that is what I have done.
Now next, what we'll do is will set the date more cost and we'll create our variable state hook for
the dark mode also.
So that will be the dark, dark, dark mode, and that will be the function to set this to set dark.
And more so this is what we have done.
Next, we'll giving will be giving it our initial value.
What is the initial value U.S?
Straight and initial value, it is false for it, like it is a Boolean value.
Floss false because it is the.
In the beginning, we will be showing the light, the what we learned about the dark motivation only
when the user clicks on the download button.
As simple as that, it is like really simple.
OK, next to what we will do is we will right.
I use effect.
Now what is a huge effect?
What it will do, it will be responsible for the changes or the things which we want to like.
Like display on the very first visit of the user when the user comes and the page loads for the very
first time.
Whatever will be displayed that will be decided through, they are used to subtly use effect and they
decided to let me first important here.
So there will be use effect.
OK, I did that next.
And inside of this.
I'll create the use effect that will be used.
Effect.
Of course, that expression function.
So it will be something like that.
And inside of this, I will have a concert.
That would be saved notes.
That would be equal to the Western diet.
Boss.
And do you want to save it to the local storage local?
Oh, it is darned good.
I don't.
And sort of the thing to be.
And that would be the name of our app.
No, let me see right off.
Why?
I'll be like, you are there are no leaders of no.
But that will be.
The.
Or the review review.
Yeah.
And there's a serene randomly that came of it.
And next, we will be.
Forgiving our dependency it inside this huge effect.
What is our dependency like dependency or is it like whatever the variable instead is under dependency?
The bad with evil is responsible for the function, but execution of the function and side effect,
like whenever that particular variable changes, then or at that time, only this function will be executed.
For example, I come here.
I'll place notes here now whenever the North, this variable changed, so then only this function or
whatever it is that inside this that would be executed, it is as simple as that.
But what we are done with to use effect.
And next, we will be having the add note functionality.
So we will have the original functionality now.
So let us create a function again.
That will be.
And North.
So, Michael, you know, it's going to hurt.
We will have the not.
Head north and then it be taxed and fired as an argument, so software title function on this.
And this one is a federal function, and that will be construed did say it now, you might be wondering
whether that will conform in our application so that they come from this line new.
It.
Yeah, that would be another like new note.
This would be for the new North, so foremost.
You know what?
And this could it be for the I.D.?
And that we look at from the packages reinstalled, that is an NYT.
That's it.
Not to my current commander, remember, don't make this mistake is a common or semicolon, OK?
Well, after the idea that would be taxed, which would be taxed.
And after this, it'll will be the date.
Which will be.
Failed to look strong.
Who?
Local.
It.
Thank.
Now, why I'm getting this better is because I did not provide a comment, and instead I provided the
doc will stop you.
Oh, no problem that it is spellings at all.
It did start to look altered string.
You look all day to.
This.
I.
If come to it, OK, OK, their suit and.
Let me also give the.
Like.
New notes for the for the new notes.
That would be an idea after this, but would it be another let go?
And new words and that will be equal to.
Murdoch and Nord's knew North.
And after that, we will setting it to we will be set in the third.
North and east and north, there will be the.
New norms, and we'll save it.
So that is it.
And this is giving us the new not.
So basically now we are left out with the delayed mode functionality, so that is what we are left out,
so that will do in the next few.