Okay, so we have our movie list displayed here, but we'll optimize it a little bit and we'll add more
things to it.
At the moment we don't need to put a movie list here so I could remove it and we'll change the list.
How to display that here.
So let's go back to our application and that movie list.
I can remove it from here.
And also I want to return more thing for for this movie.
So at the moment we have only one tag.
So it can be on one line.
One line.
But I want to put more data in.
So I will open the braces and close it here.
And in that way I can split it to separate lines and I can include more data inside.
So what we want to do it is we want to wrap it with a div.
So I will do div and I will finish div here.
So inside that div what we need to do is that key needs to be on the parent element.
So I will take this.
This is requirement for requirement for a reactjs.
Whatever we do a map, it needs to know which object is rendered.
So we need to provide something unique and that needs to be on the parent element.
So we have a div that will be unique because we know that ID is coming from our API is unique.
And then we display that here.
So at the moment nothing's really changed.
So if I will save it here, if I will go here.
You see I have a list of movies here as I had it before.
So going back here, what we can do is we can actually make a trigger.
So what we want to do is we want to click onto one of the movies, and then we want to notify our parent.
So which movie has been clicked.
And we can do it in a few ways.
So here I can do onclick.
And that's a function that will be triggered.
So that's a mouse function.
So we can capture the event click.
But we don't have to.
We can leave it empty.
And that means it will trigger whatever it's here whenever we click it.
So that's that's an event.
And then we have an option to do something here, so I will call it movie clicked.
That function will be triggered whenever we click on that.
We could specify that function here and have that movie clicked here.
But in fact we are in we want to have that information here and our parent component.
So at the moment we don't have anything in here.
But I could use state and I can actually store which movie has been clicked.
So I will do that first.
So I will do constant and I will do selected movie.
And also I can do that selected selected movie.
So that will be our state that we will control.
So use state.
If I will click enter it will be automatically imported from from react.
And at the beginning it's null.
So basically we have selected movie variable and we have a way to set up Here, but we don't have a
way to to trigger that.
So here if we will.
Create constant we will create a movie clicked function that will be an arrow function that will accept
movie.
Then we can use set selected movie and use that movie that has been pasted here.
So what we've done here is we have used state variable selected movie.
And when we trigger that movie clicked then we will set it to that variable.
But how can we actually do it.
We are we have it already in the parent class in the in the app.js here.
But what we want to do is we from the movie list, we want to click it.
That means if we have a function like this, we can actually pass it to here.
So I will do movie clicked and in curly braces I can pass any data.
So if I have some data I can pass it here, but this is also like a data.
This is a callback function that we can trigger from there.
So if I will pass it like this, that means movie list.
We will pass that movie clicked reference to that function.
That means if I will go to movie list, I can trigger that from here.
So you see, I have movie clicked and I can do that.
But I need to specify that movie list will actually receive that movie clicked as a prop.
So basically what we are doing is we are passing that reference movie clicked wherever we it will be
trigger.
It will be trigger this function.
And then a will we can actually do console log here and let's say movie title.
So whatever we click it we we should see movie title.
So we pass that reference to that function movie list.
Whatever we click on H2 will trigger that.
And that is passed as a as a prop here.
So if we will save here and go to our application, we have.
Some problems here compiled.
Objects are not valid or for actor child it.
So if I will refresh it.
So this is expecting a assignment to the function call.
So in my bad here.
So basically what I need to do is I need to actually trigger that here.
So whatever we click it I don't store the reference but I need to trigger that function.
And in that function what I need to do is I need to provide some arguments.
So I need to do movie.
So when we click on it that will be an event.
So we can even put event that will be mouse event and that will trigger movie clicked, which is coming
from our props here.
And I will pass a movie reference to it.
And basically if we have more than one, we loop through that.
The current movie that I am clicked will be passed to that function.
That function is registered here and it is passed as an argument in here.
The movie clicked is trigger.
Then that will go here and that will be triggered.
Basically we have the same name here but it doesn't matter.
And then that will be trigger and it will be set in our state.
So let's go back to our application.
Now we don't have that error if I will click it here.
You see I have undefined and here I have undefined as well.
So that means it is not passed properly.
So what I could do is I can go back here and let's try to print everything.
See if we actually can trigger.
So click is working and I think I misspelled it I misspelled that here.
And title yes I did.
So it was titile I haven't noticed.
But if I will trigger if I will um, console log everything you can see here.
If I click on Titanic I have data for Titanic.
If I click on avatar, I have data for avatar.
So for sorry for that.
That means what we've done here is we set selected movie and we store it here in the parent component.
So from here we just select a list of movies.
And we have a way to tell notify our parent through props to trigger that.
And we still have that variable here.
That means we can from here send it to another component if needed.
So I can remove for now.
And this and we have it set up.
So whatever you need to pass some information to component you can do it with a props.
It doesn't have to be a function.
If you will load some data here you can pass that data there in the component you need to.
In the curly braces, specify what data you are passing and you can use it.
So our function here, it's just as any normal um variable here because that's an arrow function.
So we can actually trigger that from anywhere.
And it will be triggered in our parent.