Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Displaying the Search Results

6:42 with Guil Hernandez

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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to set up Workspace

Sign up