‫Let's keep working on our application
‫and allow users to select a movie
‫so that they can see some details about it.
‫So checking our demo app,
‫what we want to do now again is to add the ability
‫to select a movie like this.
‫And so then our app will load some additional data
‫about that movie and display it here.
‫And then we can also go back by clicking on this button,
‫which will then close that movie.
‫All right.
‫So basically that is adding some more dynamics
‫to the application.
‫And so what that means once again
‫is that we need a new piece of state.
‫And so that state will basically store
‫which movie has been selected here.
‫Now the selection itself, so updating the state,
‫will happen here in this box on the left side, right?
‫But the displaying of the movie happens here
‫on the right side, so in this box.
‫So this box will also need to know about the selected ID.
‫And so this means that this new piece of state,
‫so the selected ID state, will have to live here
‫in the parent component, so right in app.
‫So, selectedId
‫and setSelectedId,
‫useState,
‫and we are going to start with null.
‫And here it's, of course, Selected.
‫Then here, let's get rid of this,
‫which we don't need anymore.
‫And now you might be wondering why here we are only going
‫to store the ID and not the entire movie object itself.
‫Well, the reason for that is that the movies
‫that we get here from the search are very limited.
‫So we only get the data really about the title, the year,
‫and the poster here.
‫While here on the right side,
‫we will want all kinds of details
‫that are not included in this first search.
‫So there will have to be another API call.
‫And we can see that here when we click,
‫it loads the movie again.
‫And so only then all of these details here are fetched.
‫And this fetch here,
‫so this movie will be fetched based on the ID
‫that we got here in this array.
‫So let's take a look at that quickly.
‫So it's very important
‫that you understand how we actually built this application.
‫So it's not just about the React concepts themselves
‫but also about the logic of how we build an application.
‫So I think that's also pretty important.
‫So let's see.
‫So taking a close look at our results,
‫each of the objects has the poster,
‫the title, the type, the year, and the ID.
‫And again it's based on this ID
‫that we then will search for details.
‫And actually let's copy this ID here,
‫and I will temporarily use that here.
‫All right.
‫So just so we can see what happens
‫when we actually have a selected movie.
‫Then we no longer need this,
‫and now let's create a new component.
‫And so that component will then be displayed
‫if there is a selected ID.
‫So basically that's like a selected movie.
‫So movie list, movie, let's do it right here,
‫function SelectedMovie.
‫And this one will get as an input,
‫as you can guess, the selectedId.
‫So here let's for now just return a div
‫with the class name of detail.
‫And then for now, all we are going to do
‫is to display that selected ID in there.
‫All right.
‫And now going back up here into our JSX,
‫here on the right side, we now want to display not this,
‫but instead that component that we just created
‫in case that there is a selected ID.
‫So let's wrap all of this into a JavaScript mode block,
‫and then let's do a ternary operator.
‫So all we have to do is to say
‫if there is a selectedId, then display MovieDetail.
‫I'm not sure why that's not appearing here.
‫Maybe I gave it some other name.
‫Ah, SelectedMovie.
‫Well, actually I wanted to call it MovieDetail
‫or MovieDetails even.
‫So that makes a bit more sense, I think.
‫Yeah, so MovieDetails.
‫And then we pass in the selectedId.
‫Okay.
‫And if not, then that's where we want to display these two.
‫However, this is not going to work, so let's see.
‫And indeed, once again,
‫it's because here we have a piece of JSX,
‫so all this, which has basically two root elements.
‫So it doesn't have just one single parent element,
‫which, remember, is always necessary in a piece of JSX.
‫And so this is yet another great use case of a fragment
‫because, of course, we don't want
‫to create like a new div element
‫or something like that around these two.
‫So, just like this.
‫And again the reason for that is here
‫as the third part of the ternary operator,
‫we needed a new piece of JSX,
‫which cannot have two elements as the root element.
‫And so we just created one root element with the fragment.
‫Okay.
‫So now we can indeed see this ID that we passed in,
‫so the SelectedId,
‫but, of course, we don't want this to be hard-coded.
‫So let's set it back to null,
‫and then this will disappear.
‫Indeed.
‫And so the final step, as always, is to update the state.
‫So where are we going to do that?
‫Well, basically as the user clicks one
‫of these movie objects
‫or actually movie components.
‫So let's go to the movie component then,
‫and let's do that here with the trick
‫where we hover and then command or control + click.
‫So, movie list, and then right here on the movie on the li,
‫we can attach the onClick handler.
‫However, we don't have access to any function here yet,
‫so let's first go back and create that function.
‫So let's do that, well, maybe before the effect.
‫Okay, so let's do that here.
‫So this is just what we have done many times before,
‫which is in the component that owns the state,
‫we write some event handler functions that we then pass down
‫to some child component to update the state in the parent.
‫So here I will call it handleSelectMovie.
‫And so then this will pass in a movie ID.
‫Set selected ID to that ID.
‫And so we could also have simply
‫passed down the setSelectedId,
‫but I think like this,
‫it is a little bit cleaner in some situations.
‫All right.
‫So it's cleaner in my view
‫because like this, we give it a really clear name,
‫and so then we know exactly what's happening.
‫Ah, of course, we didn't pass it yet into the movie.
‫So that movie is inside MovieList.
‫And so we need to pass it there first.
‫So here we are going to need a little bit of prop drilling,
‫but if it's just one level,
‫then that's not a big deal at all.
‫So let's call this here onSelectMovie,
‫will be handleSelectMovie.
‫And then let's just grab this, move to our movie list.
‫Then we accept that prop here
‫and pass it right into the movie,
‫so just like we have have been doing so many times
‫except that here and then here,
‫we need to create a brand-new function,
‫remember, not just calling a function.
‫Okay, and then we pass in the movie.imdbID.
‫So we can see that right from here.
‫So in each of the movie objects,
‫the ID has this name right here.
‫Okay, give it a save, and now let's see what happens.
‫So we click here.
‫Then we get this ID.
‫Then we get another one.
‫And then here we get this,
‫which is exactly the same as this one.
‫So, this is working great.
‫The only thing I noticed
‫is that here we don't have these styles, which here we have.
‫Let me just see if we are missing,
‫if we are missing some styles here.
‫And apparently this list here
‫also needs the list of movies class.
‫So I forgot that one earlier.
‫And yeah, so now as we hover over each of these movies,
‫we get this nice highlighting.
‫Okay, and now just to finish,
‫let's quickly add the ability
‫to also close basically the movie detail,
‫which is simply to set the selected ID back to null.
‫So, let's create that function as well,
‫so handleCloseMovie.
‫And this one doesn't need anything
‫because all it will do is to set the selected ID to null.
‫Okay.
‫And then, of course, we need to pass this function
‫into the movie detail.
‫So right here, onCloseMovie.
‫And then let's grab that, move there,
‫pass it in.
‫And now let's just create a button here.
‫And this one has the class of btn-back
‫and onClick.
‫Well, it's simply onCloseMovie.
‫And so since in this case we are not passing
‫in any ID here or anything,
‫there's no need to create a new function.
‫So, of course, we could do this,
‫which would be exactly the same thing,
‫but that doesn't make sense in this case
‫because, again, there's no need
‫to pass anything into this function.
‫So let's just do this.
‫But, of course, we also need some content into that button.
‫So let's use this HTML entity, which means left arrow.
‫And there we go.
‫So if we click this, then we go back to what we had before.
‫Now finally, we could also implement
‫that when we click here again,
‫that it will also close the movie.
‫So, of course, if we click on one of the other ones,
‫then we see the ID here change.
‫But if we click on the same again,
‫we could also make it so that the movie then closes.
‫And so let's do that to finish this lecture.
‫So going back here, that's not too hard.
‫So right here, we can simply do a ternary operator.
‫So basically we can ask if the ID is equal
‫to the current one, then set the new selected ID to null.
‫So this means that we will now set the new state
‫based on the current one.
‫So let's just use the callback,
‫so selectedId,
‫and then we just say id equal to the already selectedId.
‫And if so, set the new one to null
‫and, otherwise, to the passed in ID.
‫So let's try that.
‫And if I click again, ah, then it closes.
‫Beautiful.
‫And so with this, we are now ready to, in the next lecture,
‫actually fetch the movie that corresponds
‫to the selected ID here.