Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Implement the 'Search'
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:01Â To implement search, we'll reuse the same fetchMovies function that we've created before, but we'll have to tweak it just a tiny bit.
00:00:10Â We'll have to track the changes in the search term state.
00:00:13Â And whenever it changes, we'll have to recall the fetchMovies function with a different API call that's used to fetch movies.
00:00:20Â No longer will it be discoverMovie, now it'll be a searchMovie, and we'll also have to pass a mandatory search query string.
00:00:30Â So let me show you how to do that.
00:00:31Â First, I'll make this fetchMovies function accept a new param called query at the start equal to an empty string.
00:00:40Â And then we can pass over our search query from the state.
00:00:45Â or search term into the fetchMovies function, which will then be populated as a query right here.
00:00:51Â Oh, and let's not forget, we want to recall the fetchMovies with the updated search term whenever the search term changes.
00:00:58Â And you already know how to do that.
00:01:00Â you just add the dependency into the dependency array of the use effect, search term.
00:01:06Â So whenever it changes, this function will be recalled and fetchMovies will be called with the updated query.
00:01:13Â So we can now modify the endpoint by saying if a query exists, in that case, we can have one call, else we can have another.
00:01:23Â So if a query doesn't exist, we just want to use the same one we used so far.
00:01:27Â But if a query does exist, we want to modify it just a tiny bit.
00:01:32Â First, get the API base URL, but this time it'll be forward slash search, forward slash movie, to which you want to pass the query.
00:01:41Â But we want to make sure that this query is optimized to be displayed in the URL or to be called as an API call.
00:01:47Â So instead of just passing it as a string, we can say query is equal to encodeUriComponent.
00:01:53Â This function encodes a URI by replacing each instance of certain character by a couple of escape characters representing the UTF-8 encoding.
00:02:03Â This will make sure that our search term, no matter which weird kind of characters it has, still gets processed properly.
00:02:09Â And to it, we can pass the query.
00:02:10Â And everything is still the same.
00:02:12Â We're still getting back the response and then setting up the movies to our state.
00:02:16Â The only thing that was different was passing the right query to the right endpoint.
00:02:21Â So if I reload and I start searching for something like let's say the Batman, you can see that the search is fully functional.
00:02:30Â And of course, this is working even better on desktop as you'll be able to see more movies at the same time, maybe Dark Knight.
00:02:39Â Yep, this is working great.
00:02:41Â What is your favorite movie?
00:02:43Â Let's go with Godfather.
00:02:46Â It's one of the classics.
00:02:47Â Or maybe Avatar.
00:02:49Â Or maybe you like anime, something like Attack on Titan.
00:02:53Â That should be there too.
00:02:55Â There we go.
00:02:56Â While typing these movies, I'm sure that to at least one of you, I've chosen your favorite movie.
00:03:01Â But yeah, with that in mind, this search is now fully functional and it works.
00:03:07Â And if we type something that doesn't exist, you can see that we get nothing here.
00:03:11Â And if you type something random, you can see that even if a poster doesn't exist, everything still works and it doesn't break because we put that dummy
00:03:19Â poster not available image.
00:03:20Â But we're not done yet.
00:03:22Â In the next lesson, I'll teach you how to optimize that search.