Okay, so we've done a way to update our movie or update the rating for our movie, but we don't have
anything to change the movie from our UI at the moment.
We can do it with our API, but we need to enable that in our A web application here.
So what I want to do is I want to add extra things here.
So first thing first on for each movie here that we have it I will add two extra icons.
So let's do that.
First I will go here and we will go to movie list here.
So this movie list what we have is at the moment we have just a simple text to H2, but we can actually
go here and add some icons.
So we will need two icons.
So I will go back to our page.
We have react icons here.
And we'll need to have one for edit.
And we can find some.
For example maybe that would be good.
So we can have this one.
It is kind of similar style of lines and everything.
But you can pick any any one you like.
So I will go here and I will import that first.
So the top I will have one icon for for edit.
And I will have another one for delete.
And we'll use it later on.
So let's say this one.
And so this is from a different library but I don't mind.
So I will copy that.
And then we can go here and we have to new icon.
So I will add two icons here.
So for edit.
And then the second one was MD delete.
And I will have it here.
So if I will go here I should see the icons here.
We'll do the styling later on.
But at the moment what I will try to do in this video is to enable editing this.
So if I will click on this one, I want to load a movie as it was.
But if I will click on the edit, I want to edit that video and we'll create a kind of form for for
that movie.
So let's create a new component.
I will right click New File and I will name it movie Dash.
Form.
And then J6 here what we need to do is I will do export default and movie form.
And that's going to be our component.
I need to return and let's say I will return if.
Inside here we can put maybe our h1.
H1.
Movie form goes here we have a new component.
Sorry I need to put a function here.
Forgot about that.
So we have a new form component that we can inject somewhere.
So I will go for now.
Here and inside here I can put it here.
So if I will do it like this, it will be auto imported for me.
So, uh, actually it is not.
So what we'll do is import movie form from components and then we have movie form.
So we have a new new movie form there.
If I will go back to application, you can see here movie form goes here.
So what we want to do is we want to tell our application that we clicked on either one or another.
At the moment in the movie list, what we have is movie clicked and then we have set selected movie.
What we can do is we can duplicate this and instead of having a second one selected, we can say edited
and set edited movie.
And we will start with null as well.
So we have another state here that we can store some information here.
So the same way as we've done it here when we clicked on the movie Then we have set selected movie.
Then we had we can do edit movie and we will trigger this function set edited movie.
So it's similar to what it was before.
But now we have like edit movie, another method that we can call.
So going back to movie list here, you see this was our one method.
And I can say I have another method here.
And if while we scroll here this is what we have done before.
So when we click on that h tag on that H2 tag, we have a mouse event.
And then we use movie clicked and we pass that movie.
So I will do the same with our edit here I will do onclick.
There is a mouse mouse event.
We will do edit movie.
And then we will pass movie.
So this edit movie will be trigger from here, and then we will go back and I will call that for now.
It will go back here.
This will be trigger.
Then it will be set in our state.
At the moment we don't really do much with this.
So it is stored here.
But once it is stored, which one has been clicked as edit, then we can actually pass it to movie form.
So the same way as if we've done it here with movie details.
This time we will not pass the selected movie, but we will pass movie and we can name it whatever you
like, but I will call it movie and then we'll pass edited movie.
So I will go back again to movie form.
This time we will get.
So we'll do curly braces here, we'll get the movie.
And what I can do is I can say if we have a movie, I will do end to end.
And then I will say movie title.
So if we pass movie to this component then we will render.
So this this is actually checking if we have that movie, then we will render this with a movie title.
And in here I'm passing that movie from edited.
So at the moment when we start application edit, it is null.
So edit movie we have that trigger here, so it will be trigger whenever we click on that edit icon.
From here it will be selected.
Here it will be passed to movie our new component movie form.
And here we'll have a conditional to display.
So if I will go back here and at the moment nothing is displayed.
So if I will click on on the heading here the normal movie is displayed.
But if I will click on the second one here you see movie form goes here and that's another trigger,
another state.
And we have another way to display things.
And you see that I have that Titanic here.
If I click on this one I have avatar.
So in the same way as we've done it with this one, now we are passing something different and we will
use it to update that movie or create a form, and then that form will update the original movie.