Preview
Video Player
00:00
00:00
Displaying the Search Results
8:37In this video, we'll finish building the GIF Search app. You'll learn to use refs in React to get direct access to DOM elements, add default parameters to the query state, and use conditional rendering to add a loading indicator.
In our app, the searchText state is
local to the SearchForm component.
0:00
The typed value of the input isn't
really a part of our application state.
0:05
It's just state that's needed for
the component to work.
0:10
So it's acceptable to use
the searchText state to update the GIF state
0:14
onSubmit,
especially in a small app like this one.
0:19
Now, if you're building a larger app,
0:24
where a searchText may be used
in other parts of the app.
0:27
Or you simply don't wanna state
that dependent on another state,
0:31
you can also use a ref to access
the value of the input field.
0:36
In React,
the ref allows you to reference a value,
0:41
or get direct access to a DOM element.
0:45
So we'll start off by changing
the searchText from a state to a ref.
0:48
We'll replace useState with useRef
in both the import statement and
0:53
the searchText declaration.
0:59
As you may remember,
useRef returns just the ref object.
1:02
So let's delete setSearchText and
the square brackets.
1:07
Since searchText will
reference the DOM element,
1:13
we'll set the initial value to null.
1:17
So React will set the current property
to null when it first creates
1:20
the searchText ref.
1:25
And will set the current
property back to null
1:27
if the node is ever
removed from the screen.
1:31
In the return method,
let's delete the onChange event and
1:35
give the input a ref attribute.
1:40
Then we'll pass our ref object,
searchText to the ref attribute.
1:43
After React renders
the component onto the screen,
1:50
React will set the current property of
our searchText ref to that DOM node.
1:54
And we're able to access the value
the user enters in this input field.
1:59
Now, we can reference the input
inside our handleSubmit function.
2:05
To access the input field value,
we'll pass changeQuery,
2:11
the argument, searchText.current.value.
2:17
Let's save and test this in
the browser to make sure our search
2:21
functionality still works, and it does.
2:26
You can check the teacher's notes if you
want to learn more about refs in React.
2:30
Now, let's make our app
a little more fun and
2:36
interesting by displaying a default
list of GIFs when the app first loads.
2:39
That way,
the page won't look empty and boring.
2:44
We can do this by giving
the query state a default value.
2:49
So let's set the default value
of query to candy by default.
2:53
Let's save and reload the app.
2:58
Great, this fetches the list of
candy GIFs as soon as the app loads.
3:01
Finally, what if no GIFs are returned?
3:07
For example, if I type some
gibberish in the text field,
3:10
see how the list is now empty.
3:16
It would be nice to provide some
information to the user when no GIFs
3:18
are returned.
3:23
In the project files,
I included the file NoGifs.js,
3:24
which is a component that
renders an icon with the text.
3:29
Sorry, no GIFs match your search.
3:34
So let's import this
component in GifList.js
3:38
with import, NoGifs from NoGifs.
3:44
Then in the GifList function,
3:48
we'll need to do some conditional
rendering based on the returned results.
3:50
If results are returned,
render the list of GIFs,
3:55
otherwise, render the NoGifs component.
3:59
Now, you can do this
a number of different ways,
4:03
and I posted a link about different
methods in the teacher's notes.
4:06
I'm gonna use an if statement that
returns the list of GIFs if the results
4:11
are greater than zero, else,
it will return the NoGifs component.
4:17
So below the result constant,
4:23
we'll declare a variable
named gifs with let gifs.
4:26
And right below them,
we'll type if the results.length
4:31
is greater than 0,
gifs is going to equal this map method.
4:36
Else, the variable gifs,
will equal the NoGifs tag.
4:47
All right, so let's save and try it out.
4:54
Over in the browser, I'll type some
random letters in the text field.
4:57
And if it returns, no search results,
5:02
it renders the NoGifs component
with the icon and the text.
5:05
Nice, now,
there's one small glitch we should fix.
5:10
When the app first loads, or
any time you refresh the app,
5:15
you'll see a quick flash of the NoGifs
component just before the GIFs load.
5:19
To see this better, we can simulate
a slower network connection
5:25
by opening the DevTools and
heading over to the Network tab.
5:30
Then we'll click the throttling
drop-down menu and select Fast 3G.
5:35
Now, when we refresh the app,
you can see better that our
5:42
NoGifs component renders first
before rendering the GIFs.
5:47
This happens because the initial value
of the GIF state is an empty array.
5:52
So in the short moment the data is
being fetched, there are zero results.
5:58
Once again, we can use conditional
rendering to add a loading
6:03
indicator that lets users
know the data is loading.
6:08
We can render the loader or
6:12
the list of GIFs depending on
the state of the application.
6:14
So back in App.js.
6:20
I'll initialize a loading state and
6:22
set it to true by default
by typing const loading,
6:26
setLoading = useState and
set the initial value to true.
6:32
Under the setGIFs statement,
we'll update the loading state to false.
6:39
Because at this point,
the data has already been fetched.
6:44
And let's also have the loading indicator
show when the user fetches new data.
6:51
So at the top of the setup function,
we'll set loading to true.
6:56
So now, we can use this loading state
to render a loading indicator if
7:03
the loading state is true, or
render GifList if it's false.
7:09
In the return statement,
I'm going to use a ternary
7:15
operator to evaluate the true and
false states.
7:19
So inside this main content div here,
7:24
I'll add a set of curly braces,
a set of parentheses for
7:27
the condition, then below that,
a question mark and a colon.
7:32
So I'll set the condition to loading.
7:37
So if loading state is true or
while the GIFs are loading,
7:41
we'll render a paragraph
displaying the text loading.
7:45
Otherwise, if the loading state is false,
render the GifList component.
7:50
All right, let's save this and
test it in the browser.
7:57
When I refresh the app,
It immediately displays the loading
8:01
text below the header, then we see
the list of GIFs on the page, perfect.
8:07
Let's change the throttling drop-down
menu back to no throttling.
8:12
All right,
our GIF search app is now complete.
8:18
Remember, we're always here to help.
8:22
If you have any questions about
anything covered in this workshop,
8:25
feel free to reach out to the Treehouse
staff or other students in the community.
8:29
Thanks everyone, and happy coding.
8:35