OMDB Search
Now to get the search feature working. We'll need a couple functions in order to correctly search for a movie.
searchChange
, to update the value of the input fieldsearch
, to take thesearchTerm
and query OMDB
Let's make these changes in src/components/OMDBSearch.jsx
Much of this is similar to the Todo app from before, but what's with this fetch
function. Where did it come from?
fetch
is a new and experimental interface for interacting with network resources. It's similar to AJAX, only it's available natively in some browsers. Note that this will only work in later versions of Chrome and Firefox, but there are scripts called polyfills that allow you to use this feature in all browsers.
After testing the code above, there should be search results appearing in the console. Now for rendering...
Rendering Search Results
To make things simpler, we're going to render the search results directly in the OMDBSearch
component, without making a separate component. Let's modify the render
function to do this.
Passing imdbIDs to ShowMovie
To link correctly to the ShowMovie
components, we'll need a react-router
module called Link
in order to create the links. In /src/components/OMDBSearch.jsx
, let's require the Link
module.
Then, we'll create the Link
components inside of the render
function. This will allow us to create links and pass the imdbIDs to the ShowMovie
component.
Test the app again by searching for a movie and clicking on one of the links. We should be redirected to the ShowMovie
component, where the imdbID is rendered to the page.
Rendering Movie Details
In order to render movie details, we'll need to fetch the data in a similar manner as OMDBSearch
. Our workflow will look like so:
Set the initial state of the movie to
null
while we search for the movieIf the movie doesn't exist, display Loading to the page
Search for the movie using the
imdbID
passed via route paramsOnce the data is found, set the movie state
Render the movie to the page
In MovieShow
, let's add the following:
We should now have a working movie app, complete with a Back button via Link
.
Last updated