So in the previous video, we saw that a component was not being rendered on the browser.
So did you figure out what was the reason for that?
If not, let me just tell you what is the reason?
So the reason is we have not imported our component in aggregate.
This file, as you already know.
And if you don't know, let me just tell you that any component which you want to display on the screen,
which you want to, which you want it to go to and rendered so that you need to import and and you need
to include it in the abductees file.
If not, it will all be rendered and you will not be able to sort of see the images which you make or
you need to, you know, you don't need to like see what is there in the component, so you need to
import it.
Let me just go ahead and import it.
So this is how you write import like any name you can provide here.
So I provide certain.
I mean, OK, it's already doing their part for me.
It's a good that's a good way.
All right.
Let me just provide caps lock for the first automatic surge mean from component source men sometimes
are just auto imports when you buy piping only.
And if you include all sorts of, sometimes it just gives you an option for importing.
Let me just include this here to to me.
And let me just save and let me go to the.
But I was a yes, you can see that is up in Brookfield, which is typesetting new and headed the city.
So we have successfully rendered whatever code we type.
So let me just go back to the browser, and right now it's clean.
It's looking a little bit basic without any styling.
So let's go ahead and import this useless file, which we created because without CSIS, it's is just
the skeleton.
Like, there's a saying like it's doing with just a skeleton, and they're designing all the things
which are visible to us, which we see.
So that is the CSIS.
So you need to like, provide the CSIS.
So let me just go ahead and import the scissors file in the search component.
Let me important and it will be important.
From and now I will provide the source to the my just fine for.
Maybe this.
No, I am doing some mistake, and that is the spelling, correct?
No, we'll just provide I think we'll just provide this, which is the source of the.
Is the source of the cold to fine when it is located, actually this address, OK, so components and
then you need to provide.
Styles.
Hostile darts us.
OK, now if I go back to the browser.
And if I just refresh and see, OK, we are seeing Acquia able to see like little styling is being done,
although not all of the styling is done, but some kind of styling is there.
So we can we can go ahead and tackle it.
Like why it's not looking like that.
Let's go back to the VA escort.
And now I'm here.
And let me just provide help search in place of Sadr City because you don't need to write big, big
text and the button buttons are like as beautiful as their small in the battle.
There will be surge and here I will write down city name or you can just write 30 30.
Circuit City and then good arts.
OK, if I see it and now if I go back to the browser.
It looks a little bit cleaner.
OK, so now if I go back to the escort and let's do other things, you know, what we want to do is
that we have to capture the text, which is being, let me show you, we have to capture the text,
which is being typed here right now.
OK, so what I want to retype here, so that needs to be captured in a variable.
And that variable needs to be parsed in the in the you are looking at the API, which we saw.
So that's very important.
So for that, what we need to do is we need to create a variable which will store this variable, which
will store the value, which or key which we type here.
So for that, I need to like see what is being typed and we need to store it into parser.
So all that work will be done now.
So can we just import it was a fact and use state?
Right now, we just need you state and the U.S state is what I will explain, you know, and later on,
I'll explain you use effect, which is what is the use effect?
So let's just create a.
So here you will, right the variable, which needs to be a lake which is responsible for storing the
fuel and bossing it, so we'll put it in your state variable, so it is something like that.
First, we need to define it like Konst and then an audit, and inside this, there will be a variable.
And the next will be the function, which is responsible for changing that.
Very but so we will write it like.
So it's done.
First home and then next to the function that.
Third.
So this will be the function, and next to that will be.
Default value.
So this is how you will provide default value, and now here, for example, I am providing default
value of Mumbai, so that doesn't matter.
You can provide anything or you can leave it blank.
No issues with that.
So this is the variable which will be storing the data which is being typed, and this is the function
which is responsible for changing that variable.
OK, so next, we need to provide a function.
We need to provide a function in this and this input field.
So which is responsible for capturing the data?
You know, when we are typing, so as as we are typing, there should be some function which we should
trigger on any or on every type of the keyboard.
Now every single alphabet we type that needs to be recorded somewhere, right?
So for that, we need to provide a function which gets triggered here on changing this input.
So for that, we have a function.
We just call less content.
This is our default function.
So we will provide on change.
And on June expects a function callback function.
So inside this, we will provide a function, so that will be we can provide a factor of like a line
function, which is the fact that the function or you can prove you can declare the function here and
you going to define everything and then you can just call it with the name.
So I'm doing it in line.
So let me just teach you how to do that.
So this is a syntax for it, and we are passing an argument which is E or event.
You can write e autrement.
So then you will provide this vital tool.
And next is that it expects like, no, that, don't you?
So what does it have done?
You can provide apparent legal basis if you want, or you can just do it like that.
No issues with that.
All right.
So now you have to like parse like every value which would Typekit or where it should pass.
So here I will call this function, this function, you see, because this is the function which is
responsible for changing the value here.
And once we call this, we need to pass the keystrokes like whatever we are typing that we need to pass
on it.
OK.
So have will call that function that is set.
So search.
All right.
And then inside this, we will pass whatever is being typed.
All right.
So that will be event on E Dot Target Dot menu.
Value.
All right.
Now we need to also give of value for this.
I want to describe like what I what is the value?
So we need to provide discount to the value and we need to provide this.
What is the value for value will be so rich?
Well, do you see this as such done?
So it is like whatever is the variable here.
OK.
The search.
It's my bad.
OK, search jump.
OK.
So let me just turn on the world for that.
We do this.
OK?
Was that because it's going like?
And like so far and I cannot see it.
OK, so now we have done this now.
We'll check whatever we type is being like recorded in that credible or not.
Before that, let me just do it.
Console.log hear and see control dot log and are variable in there to the search term.
So this will be seen in the browser and I may make a small mistake I made.
That is, your component name should always start with uppercase.
So this this was small.
So I just do like evidence for you to do that.
Never make this mistake.
Your component names should always start with a capital letter.
OK, so this will start.
So this time this has started.
I stopped it while there was a typo, so I figured, OK, OK, so let me just save it and let me take
you to the browser.
And if I open the inspector with F12.
So add whatever I Typekit should reflect.
So it's an empty string of shows.
Just take a look.
OK.
So I will write maybe Punic, be you and you'll see every alphabet I type is recorded and reflected
in this.
If we just get reflected, that means it's working properly and our variable is storing the data, which
we see see everything is being tapped.
So if I if I write to Bangalore, everything is being that is being recorded.
OK, so that is what I was trying to tell you.
So this is the variable which is storing all the the keyword, and this is the function which is responsible
for like getting each alphabet and making it a word.
So engines like on change, on change of the input, it like the name, which sort of justifies, you
know, on change, on changing the input value.
This function triggers and it updates.
OK.
So that's it.
Now we can commented on or we can even delete it.
We don't need this control.
OK, so next we'll be adding functionality to the search button like whenever we hit the search button.
So what should be done in the background?
What should be the logic?
So that will do in the next few?