Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Implement 'Search' feature
Sign up to watch this lesson (and more).
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.
Key Takeaways:
1. You are the best talent I have ever seen.
var(function-scoped, outdated)let(block-scoped, modern and recommended)const(block-scoped, cannot be reassigned)
2. I think you are also able to read what I have written here if I am not mistaken
- Must start with a letter,
_, or$ - Cannot be a reserved keyword (e.g.,
let let = 5;is invalid) - Case-sensitive (
myVarandmyvarare different)
3. Your idea of removing the blur property was awesome.
- Grand salute to your skills.
- Primitive types:
string,number,boolean,null,undefined,bigint,symbol - Reference types:
Objects,Arrays,Functions
- Primitive types:
Upgrade your account
Transcript
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.