Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In 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 performSearch function, and use conditional rendering to add a loading indicator.
In our app the searchText state is
local to the search-form component.
0:00
The type of value of the input isn't
really part of the application state,
0:04
it's just state that's needed for
the component to work.
0:08
So it's acceptable to use
the searchText state to
0:11
update the gif state here on Submit
especially in a small app like this one.
0:14
Now if you're building a larger app where
searchText may be used in other parts of
0:18
the app or you simply don't want a state
that's dependent on another state.
0:22
You can also use a ref to access
the value of the input field,
0:27
now in a react refs allow you to reference
or get direct access to a DOM element.
0:31
So here in the return method,
let's give the input a ref attribute.
0:36
When used on an HTML element, the ref
attribute takes a callback function
0:44
that receives the underlying
DOM element as its argument.
0:48
So in our case it's an input.
0:52
So I'll pass input as the argument.
0:53
Then return this.query = input.
0:58
And what this does is it puts a reference
to the input on the search form class.
1:05
So now this callback is executed
1:12
immediately after the component
is mounted to the DOM.
1:14
When the input is rendered onto the page,
1:17
it returns a reference to this input
which you can access with this.query.
1:19
Now we can reference the input
inside our handleSubmit function.
1:25
So to access the input field's value we'll
1:29
pass onSearch the argument
this.query.value.
1:34
So let's save and
1:40
test this in the browser to make
sure our functionality still works.
1:41
And it does.
1:48
You can check the teacher's notes if you
want to learn more about refs and react.
1:50
So now let's make our app
a little more fun and
1:54
interesting by displaying a default
list of gifs when the app first loads.
1:57
That way the page won't look empty and
boring.
2:02
And we can do this by providing the
performSearch function a default value for
2:05
the query parameter.
2:09
So we'll say query = 'cats', by default.
2:11
Then we'll call the performSearch
function here in
2:18
the componentDidMount lifecycle
method with this.performSearch.
2:22
We'll give this a Save,
reload the app and great,
2:28
this fetches the list of cat
gifs as soon as the app loads.
2:31
Finally what if no gifs are returned?
2:36
For example if I type some
gibberish in the text field
2:39
see how that list is now empty.
2:43
So it would be nice to provide
some information to the user
2:44
when no gifs are returned.
2:47
In the project files I included
the file NoGifs.js, which is
2:49
a component that returns an icon with
the text Sorry, no GIFs match your search.
2:54
So, let's end port this
component in GifList.JS,
2:59
with import NoGifs from NoGifs.
3:05
Then in the gif-list function we'll
need to do some conditional rendering
3:13
based on the returned results.
3:16
If results are returned,
render the list of gifs,
3:18
otherwise render the NoGif component.
3:21
Now you could do this
a number of different ways,
3:23
and I've posted a link about different
methods in the teacher's notes.
3:25
I'm gonna use an if else statement
that returns the list of gifs
3:28
if the results are greater than zero,
else it will return the NoGifs component.
3:32
So below the results, constant,
3:37
say let gifs, then right below that say,
3:42
if results.length > 0,
3:48
gifs = this map function.
3:52
I'll go ahead and put this on one line so
that it reads better.
4:01
Right below we'll say
4:06
else gifs = NoGifs.
4:10
All right so let's save and try it out.
4:15
Over in the browser, I'll type some random
letters in a text field and if it returns
4:18
no search results it renders the NoGif
component with the icon in the text, nice.
4:23
Now there is one small
glitch we should fix.
4:29
When the app first loads or
any time you refresh the app
4:31
you see a quick flash of the NoGifs
component just before the gifs load.
4:35
Well this happens because the initial
value of the gif state is an empty array.
4:40
So in the short moment
the data is being fetched,
4:45
there are zero results.
4:48
So once again we can use conditional
rendering to add a loading indicator that
4:50
lets users know the data is loading.
4:55
We can render a loader or
4:57
the list of gifts depending on
the state of the application.
4:59
So back in app.js I'll
initialize a loading state
5:02
here in the constructor and
set it to true by default.
5:06
Then in the performSearch function I'll
update the loading state to false because
5:14
at this point the data
has already been fetched.
5:19
So now we can use this loading state
to render a loading indicator.
5:26
If the loading state is true or
render gif-list if it's false.
5:30
So down in the return statement,
5:34
I'm going to use a turnary operator to
evaluate the true and false states.
5:37
So inside this main content div here,
I'll add a set of curly braces,
5:41
a set of parameters for the condition,
then below that a question mark and colon.
5:46
So I'll set the condition
to this.state.loading.
5:51
So if the loading state is true or
5:57
while the gifs are loading we'll render
a paragraph displaying the text loading.
6:00
Otherwise if the loading state is false,
6:08
render the gif-list component.
6:11
All right now let's save this and
test that in the browser.
6:16
When I refresh the app it immediately
displays the loading text
6:19
below the header.
6:23
Then we see the list of gifs on the page,
perfect.
6:25
All right, so
our gif search app is now complete.
6:29
Remember, we're always here to help.
6:32
So, if you have any questions about
anything covered in this workshop,
6:34
feel free to reach out to the Treehouse
staff or other students in the community.
6:37
Thanks everyone, and happy coding.
6:41
You need to sign up for Treehouse in order to download course files.
Sign up