In our app the searchText state is local to the search-form component.

The type of value of the input isn't really part of the application state,

it's just state that's needed for the component to work.

So it's acceptable to use the searchText state to

update the gif state here on Submit especially in a small app like this one.

Now if you're building a larger app where searchText may be used in other parts of

the app or you simply don't want a state that's dependent on another state.

You can also use a ref to access the value of the input field,

now in a react refs allow you to reference or get direct access to a DOM element.

So here in the return method, let's give the input a ref attribute.

When used on an HTML element, the ref attribute takes a callback function

that receives the underlying DOM element as its argument.

So in our case it's an input.

So I'll pass input as the argument.

Then return this.query = input.

And what this does is it puts a reference to the input on the search form class.

So now this callback is executed

immediately after the component is mounted to the DOM.

When the input is rendered onto the page,

it returns a reference to this input which you can access with this.query.

Now we can reference the input inside our handleSubmit function.

So to access the input field's value we'll

pass onSearch the argument this.query.value.

So let's save and

test this in the browser to make sure our functionality still works.

And it does.

You can check the teacher's notes if you want to learn more about refs and react.

So now let's make our app a little more fun and

interesting by displaying a default list of gifs when the app first loads.

That way the page won't look empty and boring.

And we can do this by providing the performSearch function a default value for

the query parameter.

So we'll say query = 'cats', by default.

Then we'll call the performSearch function here in

the componentDidMount lifecycle method with this.performSearch.

We'll give this a Save, reload the app and great,

this fetches the list of cat gifs as soon as the app loads.

Finally what if no gifs are returned?

For example if I type some gibberish in the text field

see how that list is now empty.

So it would be nice to provide some information to the user

when no gifs are returned.

In the project files I included the file NoGifs.js, which is

a component that returns an icon with the text Sorry, no GIFs match your search.

So, let's end port this component in GifList.JS,

with import NoGifs from NoGifs.

Then in the gif-list function we'll need to do some conditional rendering

based on the returned results.

If results are returned, render the list of gifs,

otherwise render the NoGif component.

Now you could do this a number of different ways,

and I've posted a link about different methods in the teacher's notes.

I'm gonna use an if else statement that returns the list of gifs

if the results are greater than zero, else it will return the NoGifs component.

So below the results, constant,

say let gifs, then right below that say,

if results.length > 0,

gifs = this map function.

I'll go ahead and put this on one line so that it reads better.

Right below we'll say

else gifs = NoGifs.

All right so let's save and try it out.

Over in the browser, I'll type some random letters in a text field and if it returns

no search results it renders the NoGif component with the icon in the text, nice.

Now there is one small glitch we should fix.

When the app first loads or any time you refresh the app

you see a quick flash of the NoGifs component just before the gifs load.

Well this happens because the initial value of the gif state is an empty array.

So in the short moment the data is being fetched,

there are zero results.

So once again we can use conditional rendering to add a loading indicator that

lets users know the data is loading.

We can render a loader or

the list of gifts depending on the state of the application.

So back in app.js I'll initialize a loading state

here in the constructor and set it to true by default.

Then in the performSearch function I'll update the loading state to false because

at this point the data has already been fetched.

So now we can use this loading state to render a loading indicator.

If the loading state is true or render gif-list if it's false.

So down in the return statement,

I'm going to use a turnary operator to evaluate the true and false states.

So inside this main content div here, I'll add a set of curly braces,

a set of parameters for the condition, then below that a question mark and colon.

So I'll set the condition to this.state.loading.

So if the loading state is true or

while the gifs are loading we'll render a paragraph displaying the text loading.

Otherwise if the loading state is false,

render the gif-list component.

All right now let's save this and test that in the browser.

When I refresh the app it immediately displays the loading text

below the header.

Then we see the list of gifs on the page, perfect.

All right, so our gif search app is now complete.

Remember, we're always here to help.

So, if you have any questions about anything covered in this workshop,

feel free to reach out to the Treehouse staff or other students in the community.

Thanks everyone, and happy coding.