So now we'll give some JavaScript to our component right now, we have just given the basic structure
and the things are static.
But now let us give some JavaScript.
So you already know that the script is written after the function and before they're done and after
they return to the Chest X, the letters give JavaScript.
So here will make use of the very common, very useful Hulk of the Act.
That is the use that also let me the very first thing we started with imported from the react to use.
And I'll create a hope I'll create a state variable in the whole here.
And that would be concerned.
Now what I'm going to do is.
Said the venue for the whatever is being imported inside that so that I'm going to set as they use it
every time that venue will be stored here.
OK.
No.
We'll create an array of objects, or basically you can just go ahead with the object known and often
that will directly create an object correct to that object will be name is not and the function responsible
for changing that particular object will be sad thought.
Oh yeah.
And here you will hit the initial value of that particular.
And still ahead, you will get this and there are days that would be, I don't.
That would be empty.
And next will be the and.
So this also would be empty as of the beginning, but as the like you said, what type and things can
go and be stored inside this?
OK.
Okay.
Now an extra we'll do is we'll handle the change.
Like, let me minimize the terminal.
And what the user is typing inside this and or the text.
So whenever the value of this is what should be the function that it triggered.
That would be the handle chain.
So we try to function.
And name it as though being read as boss argument.
Or you can even boss event, basically event and the lake, whatever you can pass, but EA and event
other general conventions.
And you're.
Inside this wheel, we are doing this for the name so on.
And this is named Sunbeam name and value.
So this will be affected, so be dark to get dark.
That's it.
And now after that, what we want to see are, like what we want to give value to this sad note that
is reward, which is required here.
So for of these said note.
There will be argument of free value.
People knew and said this will be just.
Returning something.
Written and we'll be giving us parade operators, so that will be the value.
Yeah.
This is basically this argument saying you we just making use of it to prevent you.
And after that, we'll give the name of a new.
And.
That will be a.
Well.
Basically, my view is lacking, I don't know why.
Yeah, it's perfect.
So that will be a value, not semicolon, just a comma here.
We can just look up here and here as it.
And then.
OK, so that's cool.
And now what we'll do is we'll force another function to create another function for the partner.
Like whenever we press the button, what happens and what should be the like, what should be the triggering
function that happens whenever I click this button?
Before that, I will create another function that would be some button or handle something, whatever
you want to call it a like.
It doesn't matter.
But that will be.
Some I'm button and then side this that will be in force eventually.
Completely depends on you.
That will be on.
And.
That is the vineyard.
I know.
What is the thing which we want to give after this?
So.
Bill said did not say.
Note this free to the final word.
OK.
Insert the note.
Side, though, and.
And we'll wait.
And then.
And after this, we'll do the event or.
Prevent default.
Why I'm using this, because I don't want the page to refresh as soon as I click the button.
Like what is that natural behavior off of form?
The natural behavior to perform is that whenever you hate the summit button or whenever does some function
of that particular form, it's called for.
The basic tendency of that form is that it forces the page to refresh, but we don't want that actually.
OK.
So let me make it inaccurate.
We don't want that to happen because that's what the act is all about and react.
Page does not reflect.
That's why it's called a single page application, and you don't need to refresh the page for making
changes inside the components or.
Inside the application, but that's why we don't want it to be refreshed, and so that's why you're
not ready for it.
If we provide a semicolon.
I think that's a our time.
Yeah.
No, we want to add these functions or I we want to call these functions on the particular.
Particular like elements, wherever they are.
So for that.
We will go to hell.
Yeah, one more thing I want to make is whenever I click on the title Burton, I'll go back that the
description.
Next, what should be appeared so before, like at the beginning, it should be done.
And when I click as soon as I click on, the title should be included.
Before that, I need to set out a state that will be known as the expanded is expanded or not, or that
I'll create with constant something's going on.
Who wants?
And here it will be is.
Extended.
Is expanded.
You can give it the.
Is.
Thanks, Ben.
And here.
Thank.
Expanded.
After that, that will be used to.
Is that a scientist that will be the initial values initially that will be false?
OK, initially, that is false and true, we'll go down.
And will create a function for that.
That will be.
Function.
And
that.
Head inside the handle, it will set the.
Start expended.
Through.
OK, now I think most of our work is done now we can go down and we can just call the expected function.
But what we will do is first, we will handle the expanded only what we will do their part in Typekit
inside the clearances and how the line is next.
And third, if that is true, so.
We will display this what we will display.
Basically.
The input this one.
So over.
Yeah, this is we actually want.
Inside input will give some things like, first of all, let me give the value like, no, there's no
value to it.
So when you.
Value would be a dark title.
And Typekit text.
All that I've already given name, I've already given, and not one change.
One change.
So.
That'll change.
And that'll change absurd, absurd civic duty.
But, yeah.
Now inside the tech studio, let us first to wrap this inside a paragraph after.
OK.
And that does putting this paragraph back down after the attacks studio.
So, yeah, and inside this after the name.
But after that exterior posting, which will give is defending new.
When you yeah, I'll give.
Or start going turn.
But the venue.
I live on Clark.
I will call the handle expanded.
The next expert and I will also call the on change basically of there will be an own change on change
that will be called Lindsay and then.
The change, and also I'll be changing the laws, according to The Expendables, true or not, then
rose.
And if that is true, linguistically is expended a straw vote, that will be Tinos.
And if it's then, it was wonderful.
Let me see.
Yeah, it looks a lot more art, more cleaner than it was.
And the last thing which we'll do is we'll create like this will give the functionality to this button.
So here we'll try it on.
Click.
Is it the.
Only.
But on the other.
Button.
That is or that is all for this.
We have to pass some props also.
So this function create area like which then will be using the outdoor gear, so that will be something
on the device here.
That is it.
Let me show you how this.
I should.
And right now, you can see that is only one rule.
And then I click on it.
There should be another one.
You can see you and I clicked on it.
There's another one.
There it is what we actually wanted to do, or no, that is completed next would be giving some styling
and all to the interior component.
So we'll see in the next one.