1
00:00:01,800 --> 00:00:06,150
Let's add in a new piece of state to our application, though, in the search component.

2
00:00:07,080 --> 00:00:09,450
I'm going to initialize a new piece of state at the very top.

3
00:00:10,290 --> 00:00:14,700
I'm going to call this new piece of state results because it is the results of my search operation.

4
00:00:15,270 --> 00:00:17,610
We'll get results and set results.

5
00:00:18,810 --> 00:00:21,360
We then need to think of a default value for this piece of states.

6
00:00:21,810 --> 00:00:24,120
It is eventually going to be an array of objects.

7
00:00:24,580 --> 00:00:28,380
I think that when we first render our component to the screen, it would make sense to use a default

8
00:00:28,380 --> 00:00:29,940
value here of an empty array.

9
00:00:30,200 --> 00:00:32,930
Just to say we do not have any search results right now.

10
00:00:35,050 --> 00:00:41,350
Then inside this search function, we're going to take the data out of the response we get.

11
00:00:42,300 --> 00:00:44,520
We have concerns, data is the request.

12
00:00:45,300 --> 00:00:47,160
And then right after we make the request.

13
00:00:47,280 --> 00:00:50,640
Make sure that you're putting this still inside of this search async function.

14
00:00:51,240 --> 00:00:53,360
We're going to use data to update our results.

15
00:00:53,370 --> 00:00:54,150
Piece of state.

16
00:00:55,080 --> 00:00:57,360
So we will put in set results.

17
00:00:58,860 --> 00:00:59,610
And provide data.

18
00:01:00,630 --> 00:01:02,910
That will cause our component to automatically re render.

19
00:01:03,090 --> 00:01:09,000
So we can then access the results array down inside of our J as X block and render out our list.

20
00:01:09,930 --> 00:01:15,330
Right now, let's just do a console log of results and make sure that we're getting the correct data.

21
00:01:19,820 --> 00:01:20,850
All right, back over here.

22
00:01:22,780 --> 00:01:26,680
Well, it looks like this first request did not quite go as expected.

23
00:01:27,050 --> 00:01:31,390
If I go to my console, you'll notice I get an empty array one time slots from when our component first

24
00:01:31,390 --> 00:01:31,900
renders.

25
00:01:32,470 --> 00:01:38,260
And then on this next console log, we get back in air and it says, as our search parameter must be

26
00:01:38,260 --> 00:01:38,740
set.

27
00:01:39,370 --> 00:01:40,000
Why is that?

28
00:01:40,480 --> 00:01:44,920
Well, when our component is rendered for the very first time, term is an empty string.

29
00:01:45,580 --> 00:01:51,100
If we provide an empty string to the Wikipedia API, they are saying, hey, you have to provide us

30
00:01:51,130 --> 00:01:51,910
and s our search.

31
00:01:51,910 --> 00:01:53,440
You can't search for empty string.

32
00:01:54,100 --> 00:01:55,990
We have two options available to us.

33
00:01:56,530 --> 00:02:01,480
We can either put in a default search term that will be displayed to the user.

34
00:02:01,870 --> 00:02:04,120
For example, we could put in programming.

35
00:02:05,880 --> 00:02:06,350
Right here.

36
00:02:07,490 --> 00:02:11,870
If we do that, then when our components first rendered, we will initiate a search and we will search

37
00:02:11,870 --> 00:02:14,570
for the term programming, that is option number one.

38
00:02:14,930 --> 00:02:16,610
Let's try to see this and then see what happens.

39
00:02:17,880 --> 00:02:22,050
You'll notice now that we've got an initial value of our state of programming and that shows up inside

40
00:02:22,050 --> 00:02:22,550
of our inputs.

41
00:02:23,220 --> 00:02:24,940
And then we could see the response data.

42
00:02:24,990 --> 00:02:27,150
Right here, we can expand query.

43
00:02:27,540 --> 00:02:30,000
And those are some computer programming articles.

44
00:02:30,780 --> 00:02:35,430
If we do not want to provide an initial value for our user, but we don't want to the request to air

45
00:02:35,430 --> 00:02:40,950
out or like that, we could revert you state right here and give it an empty string as the default value.

46
00:02:41,790 --> 00:02:43,230
And then inside of use effect.

47
00:02:44,510 --> 00:02:48,830
When we call search right here, rather than immediately calling search, we can make sure.

48
00:02:49,960 --> 00:02:51,550
That term is defined.

49
00:02:52,390 --> 00:02:54,050
But now, if term is an empty string.

50
00:02:55,140 --> 00:02:59,670
For me, a term it will, if term it is an empty string, will not search if term has some characters

51
00:02:59,670 --> 00:03:00,120
inside of it.

52
00:03:00,150 --> 00:03:03,240
We will do a search though, if we take this approach.

53
00:03:03,270 --> 00:03:08,310
We will not have a default search term and we will not make an initial request until the user starts

54
00:03:08,310 --> 00:03:09,930
to type something in like so.

55
00:03:11,550 --> 00:03:12,370
So it's really up to you.

56
00:03:13,240 --> 00:03:17,860
In my case, I think I will provide a default search term so the user can see some content on the screen

57
00:03:18,100 --> 00:03:20,770
the instant they come and look at this component.

58
00:03:21,220 --> 00:03:22,360
So I can remove that statement.

59
00:03:22,400 --> 00:03:23,830
But leave behind the search.

60
00:03:23,890 --> 00:03:24,280
Call.

61
00:03:25,270 --> 00:03:28,610
And I will change my default state right here to programming.

62
00:03:31,150 --> 00:03:32,410
I can say that one more time.

63
00:03:32,450 --> 00:03:34,810
Look back over and take a look at the results.

64
00:03:35,680 --> 00:03:36,940
You'll notice that results right now.

65
00:03:37,000 --> 00:03:39,370
I really just took all the data out of that response.

66
00:03:39,880 --> 00:03:44,140
That's not super helpful because we don't really care about all of the properties inside of year like

67
00:03:44,140 --> 00:03:47,950
batch complete and continue and search info and so on.

68
00:03:48,430 --> 00:03:51,400
Do we really care about is the search array right here?

69
00:03:51,910 --> 00:03:58,090
Maybe rather than taking the entire data property out of that response and using that to update our

70
00:03:58,090 --> 00:04:03,220
results piece of state, maybe we should kind of crawl through there and just get this search array

71
00:04:03,250 --> 00:04:03,970
of results.

72
00:04:04,970 --> 00:04:06,350
And set that on our state instead.

73
00:04:07,450 --> 00:04:13,260
Before that, when we sat results with data, we could change it to data dot the data.

74
00:04:13,260 --> 00:04:15,360
Is this entire object to be data?

75
00:04:15,410 --> 00:04:16,260
Dot query.

76
00:04:16,470 --> 00:04:17,490
Dot search.

77
00:04:21,160 --> 00:04:22,330
Get let's save that again.

78
00:04:23,510 --> 00:04:26,540
And now we can see that during our initial render, we have no results.

79
00:04:26,930 --> 00:04:28,220
The request is then completed.

80
00:04:28,520 --> 00:04:29,400
We update our states.

81
00:04:29,750 --> 00:04:34,580
We do a console log of the results piece of state, and we can see that we've got the array of objects.

82
00:04:35,330 --> 00:04:35,600
All right.

83
00:04:35,630 --> 00:04:35,940
What's the.

84
00:04:35,940 --> 00:04:36,620
It's looks pretty good.

85
00:04:37,740 --> 00:04:40,350
Then the last thing I'll do is remove that console log.

86
00:04:42,630 --> 00:04:48,450
And then finally, we need to map over that results, Ray, and build out our actual list of elements

87
00:04:48,510 --> 00:04:50,520
to display inside this giant x block.

88
00:04:51,240 --> 00:04:53,850
Let's take care of that list building in the next video.