Displaying the Search Results

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