Okay.
So in our application, what we have is we already have a way to create new movies.
And that's sent to the database and it is updated in our API.
But at the moment we don't have a way to display that.
We need to fetch a new list from the database and then we can sit there.
So in this video what we will do is we will create that functionality.
So whatever we send that create new movie, we'll have a response back.
And then we will use it to to pass it in our component.
So that will be a good exercise for us to move some data.
So let's go back to our application.
So what we have here in the movie form is when we create that movie, we send it to our API that's coming
back in the response, but we don't do it anything yet with this.
So I will uncomment this.
And when we have that response then we can do a few things.
So at the moment we use before update movie.
So we will need to have a new function that will pass it to our parent.
And I will do.
Add new movie.
So make sure this is new movie here, and then I will trigger that from here.
So we have a new function that is passed in as props here to that component.
So we can go to the parent here.
And when we have that movie form we can implement that here.
So this is the name add new movie that we have it in the component.
And what we can do here is we can trigger that.
So how can we how can we do that.
We kind of name this as a new movie before and we use it in kind of few places.
But this is not actually a new movie.
This is updated movie.
So we could go and correct that or we can use something different.
But our goal here will be to use this name here to pass to the movie list something that we created.
So we already have done a new movie.
Let's correct this just to not being confused.
So I will instead of having that new movie, I will change it for updated movie here And set.
Updated movie.
So basically we will need to have this new movie.
Will be updated movie.
And this will be not set to new movie but it will be set updated movie.
So basically we've changed this reference to updated movie.
So we could now duplicate it and I will have new movie set, new movie.
I kind of repeated that all over again, but I think that will make more sense if you see it this way.
So we have that new variable in the state here, set new movie and we will whatever.
We get that new movie from here, we'll set it into that state.
So once we have that new movie there, what I can do is I can pass that here in the, in the prop.
So movie list here you see this movie I already have new movie.
But we also need to have update.
So we will update that movie.
will have two different versions, so and I will kind of correct it because I need to name change some
names here because I kind of made a little bit mistake naming them wrongly before.
So I will do update it movie it will be updated movie, but this one will be new movie.
So we'll just correct it that in a proper way.
So we will have updated movie and we will have a new movie and whatever we click in the movie form on
Update Movie, then we will set updated movie.
When we click Add New movie, we will set new movie.
And in the movie list we will pass it new movie as a new movie and update the movie as updated movie.
So it's kind of fixing the naming convention for us, but we need to also fix it in few other places.
So in the movie list here, I have that new movie, which is not new anymore, but I will copy that
and I will replace it.
So for the new new movie, we will do something different than then what we will do for updated movie.
So basically updated movie is.
This.
So basically when we have updated movie we will check if the one ID is the updated one and then we replace
it.
And then we will set a new movies like this.
So this is how it was before.
But we've changed the variable in props just to have updated movie here.
So this one is the new one.
So what we are trying to do is we will add a new movie, which is this one.
So it will be trigger only when a new movie has been arrived.
And then what we can do is we can set movies.
And basically what I will do is I will spread new movies into array along with new movie.
And sorry, I can actually do it.
Movies like that.
So if we have a new movie arrived here, and this will be triggered only when we have new movies, what
we can do is we can set new movies and we in the array, we will put all the movies we had before and
we will add an extra new movie there.
So let's save this and test it if that works.
All.
Okay, so if I will have new test and I will go here, I can actually inspect this.
So we will see if we needed to debug this.
At the moment I will clean edit everything here.
So new test here if I will update it.
You can see that's been updated.
So it's working fine as it was.
When I click on this one everything is working fine.
But if I will create a new movie, everything is new here and I created here.
So that will be brand new.
This should be updated automatically like that.
So if I will create it.
You see I have a brand new here.
So if I will click it I have it.
All of it here.
So basically what we have is we have a way to update our components based on different information,
that will pass it.
And it kind of complicated in a way it is done.
But it's more for an exercise than designing your own application.
So what we have is whatever we need to pass information to our parent, we can do it with the props
like this.
And then we can store it in the state, or we can store it in this component, and we can pass it back
to a different component and do something over there.
So in our case, what we've done is we have a trigger.
So whenever we've changed this from props we will update this.
If we change this in props then we will update this.
And it depends on what you do.
You will have that change and send different information to your component.
One error that we see here is in the movie details.
What we have is we have that we need to have a unique key.
So let's correct this one quickly.
I will go here and then we'll go to movie details.
And when we go here.
That's what we have it here.
So when we have that map we'll repeat that five times.
So basically we need to tell what is the element that we are repeating over.
So we return this element.
But we need to give it a key.
So I will have key and then equal to I'll do curly braces.
And for us unique will be index.
So I can put index here.
That means it will be 001234 from there.
And it will be unique.
So if I will go here and then refresh it and then if I clean it click clear it and refresh it.
You see I don't have that error anymore.
So basically that is gone.
So whenever you do a loop with our react and you return something, we need to kind of decorate it with
a key.
So that has to be unique.
And that way react will know that different elements are unique.
You don't have to do this here because you've done it.
We've done it manually one by one.
So it's not rendered by react.
But this is rendered by react using that loop.