Okay, we have our new component ready for us to use, but we haven't done anything yet to enable the
form.
So what we will do in this video is we will create a form that will accept the user input for updating
this movie.
So we will just straight jump in into our movie form.
At the moment we have this, but we actually don't need it this way.
So how will we need to do is we need to create a kind of form.
So what we can do is I will create a label here and that will be Html4.
And let's say we will have title and this will be title.
So this is a label for my form.
And then I have input and that input will be I will finish that here.
So it will be type of text.
And I can do placeholder here, our title as well.
So that's what we have at the happy moment, then I can actually duplicate this.
I don't need this div.
Duplicate this and I have this one for description.
And actually I need to put.
ID here.
So ID will be title and this one will be ID.
Description like this one.
And I can have a placeholder.
Description here.
So basically what we have here I can actually put it in a two column two column grid.
So I can do class name.
And I can say grid grid columns two.
So if I will go here I should have this this maybe it's not working perfect, but we have uh we need
to fix a few things.
So first thing first this is description like that.
And this might not be input.
It might be a text area like this one.
So it will be a longer text of here.
We don't need to provide the type here because text area is already this one.
So we can actually do some gap here maybe gap of two.
So if I will go here it's looking a little bit better.
Now we have title and then we have a description here.
And then we have labels.
So what is the problem we have now.
At the moment we need to change the movie.
We pass the movie here into that component.
But the problem is that we we can't really change it.
Whatever is coming to the props, this is not how the react works and changing the whatever is coming
here, it's not going to work.
So what we need to do is we need to hold the the current state of the form in our component.
And then whatever we we click on a button, we will do something with that data.
So if we have a title we want to see.
What is the title we we should manage the state of the title here in that component.
So I will do constant and I will have title and set title you state.
Like this.
This this has been imported already and I have a new state.
So this is a this is my variables to set it and I hold it in that component.
But we want to when we click Edit movie we want to get the data and set it directly here in the title.
So what we can do is we already have that movie.
So I can use that movie and title to set the default value.
So this will be my default value there if I will duplicate this and I will do description.
And set description.
And that's going to be description as well.
So I have two different variables that I can hold it in, in the memory here in that component.
So at the moment I'm sending that here I will save it as a default value.
And then I have it there.
So what I need to do is basically I need to pass it as a value to my input.
So I have one input title and I can say value is title.
So this will be binding to this variable here.
And I will do the same here.
So value will be description.
And in that case if I will save it and go back here to my application if I will click on this one.
Edit.
And I think it's there, but it's really hard to see because the what I've done is I have changed the
Y font for an entire application.
What I have to do is maybe I can go here and I can do text Gray, something like that.
I could, I could do blacker.
But I will use the gray.
As you can see here, this is already but basically that's that's gray as well.
But it doesn't matter at this point.
But if I would click this one.
And so if a there is an error now because what is happening is if I go here I haven't actually check
it setting that here.
So I set it at this as a default value.
But this might be a null.
So there might not be a title there available for us.
So what we could do is we could protect our protect ourselves and render only this if we have edited
movie.
So I could do something like this one.
If I have edited movie, then I render this.
Otherwise I'm not going to do anything.
So that will protect me from rendering for having that here.
And I will be sure that whatever we have when we have that movie, then we can trigger.
So if I come back here, that should work.
Now, if I will click on this one, you see I have Titanic and if I will click on this one, it is still
not updated here.
So I could switch to this one.
And you can see this avatar, but we can figure it out later later on.
At the moment, what's important is that if I will click on this one, I will have the data and it will
be available there.
So what we can also do is we can add extra element to our form, and we can have a button like this
one.
And this one will be update movie.
What I want to do is on click.
If I click on that button you could create a form and on this div and then onsubmit do it.
Or you can do it on a on click on the button.
I don't mind because we don't send really any information.
What we want to do is.
Constant save movie.
And it's going to be a function arrow function that we are not going to pass anything to this function
because we don't have to.
So I can do a console log.
And.
Save movie.
Here for example.
So we have that method here.
We don't need to pass anything because we already have the data here in the state.
And I can trigger that from here.
So and I can trigger that with an event here.
And it will be like that.
But if I will click on this button at the moment it's very hard to see.
So maybe I can for now.
We'll fix that in a second, but I will change it maybe for something in the middle.
So gray 500.
So that will put me.
So you will be able to see both of them.
So if I will click on this one and go to.
My console.
And so at the moment if I will go this one and nothing is happening.
So the thing is what we also need to do first is we need to at the moment we put the value here, but
we don't update the value anywhere.
That's what I wanted to show you, but I will need to implement that on change kind of here.
So we pass that movie title here into that variable that we also need to take whatever user is changing
that input and pass it back to that function to to that state.
So what we can do is we have onchange.
So it's a way to capture whatever has been changed and we will take the event from there.
So if we can name it and that will be an arrow function and then we will use that set title.
But what we want to do and send to.
That title is Eve which is that event.
Then target and then value.
So basically from that input when we change something it will be available here in the event in the
target which is this input and the value whatever is in that input.
So if I will copy that and I will put it there and I will do the same on change set not title.
But we want to set the description now like that.
And so I think I have double here.
So we have text area and input two different places.
What we do is we put the value here and whatever we change it, we put it back in that variable in that
state.
So if I will go here, if I will do a tiny something, if I will update movie, and I don't think we
do anything here.
So if I will go back here and we need to trigger that actually that method.
And before actually we will do that, what I can do is I can print more things.
So I will print title and then I will print description.
So going back again here if I will click here.
You see I have that method here.
And then I have Titanic DTD and romantic movies which is from here.
So if I will change it here and click it, you see this is already in my state.
So whatever I change it here, it will be in my state.
So from here I have an app, a access to title and description, and that will be new values because
we already set it here, the value.
And we also captured that value.
Whenever we change a user change it on HTML form.
Then we will set it back to the state.
So this state will be available here.
And we can do something about it.