1
00:00:00,570 --> 00:00:05,760
All right we're getting closer and closer to having our app look like this but we clearly see that we

2
00:00:05,760 --> 00:00:07,820
have a search box here.

3
00:00:07,980 --> 00:00:14,450
So in this video we're going to work on having this interactive. Looking back at our app,

4
00:00:14,460 --> 00:00:15,170
we see that

5
00:00:15,180 --> 00:00:21,280
well we definitely need a title and the search box, so let's create that.

6
00:00:21,360 --> 00:00:22,830
If I go to index.js

7
00:00:23,030 --> 00:00:29,730
I think now that we're officially building an app, instead of having the "Cardlist" component here we should

8
00:00:29,730 --> 00:00:39,390
have one big component called "App", and this "App" will be the father of all our children, all our components

9
00:00:39,900 --> 00:00:42,890
Let's do that. Let's build the "App" component first

10
00:00:47,270 --> 00:00:53,060
And this "App" component again will "import React from 'react';"

11
00:00:57,620 --> 00:01:00,470
and "App" will equal

12
00:01:06,800 --> 00:01:13,130
the "CardList" component which we can just copy and put in here

13
00:01:15,560 --> 00:01:20,840
And again, changing this to "Babel", we want to import

14
00:01:23,850 --> 00:01:25,740
the "CardList" component

15
00:01:30,450 --> 00:01:37,500
and we also want to have our "robots" actually imported in here

16
00:01:37,540 --> 00:01:40,040
so we have access to it

17
00:01:40,150 --> 00:01:46,120
And then finally we now just want to render the app component so we can just bring this back the way

18
00:01:46,120 --> 00:01:48,490
it was

19
00:01:48,720 --> 00:01:54,030
We save. We need to obviously export our app

20
00:01:54,050 --> 00:02:02,960
So we'll say "export default App;", save this

21
00:02:03,170 --> 00:02:04,190
Let's go back

22
00:02:04,430 --> 00:02:04,700
Yep

23
00:02:04,760 --> 00:02:06,460
Everything is still working

24
00:02:07,060 --> 00:02:11,400
Now within the "CardList" we also have a header

25
00:02:11,470 --> 00:02:14,700
So we'll do "h1", that'll say "RoboFriends"

26
00:02:17,990 --> 00:02:22,850
and again remember that we need to return just one single parent

27
00:02:22,850 --> 00:02:27,110
ao we need to do something like a "div" to wrap it

28
00:02:31,560 --> 00:02:33,860
and I need to close this "h1" tag

29
00:02:37,250 --> 00:02:37,680
All right

30
00:02:37,690 --> 00:02:46,060
I have my "robot friends" title and we also need a search box. And although "h1" was easy and we now have to

31
00:02:46,060 --> 00:02:48,160
build a component for it,

32
00:02:48,160 --> 00:02:56,700
It sounds like we probably want to create a search box component for this app, so let's do that

33
00:02:56,700 --> 00:03:08,840
I'm going to say "import SearchBox" from a file that we'll create called "SearchBox". We will create a new

34
00:03:08,840 --> 00:03:09,200
file

35
00:03:19,810 --> 00:03:25,840
and this file will have "import React from 'react';"

36
00:03:29,030 --> 00:03:30,370
and the search box

37
00:03:32,570 --> 00:03:36,120
will have a function that returns -

38
00:03:36,140 --> 00:03:38,130
Let's think about what it returns

39
00:03:39,400 --> 00:03:43,830
Well it definitely returns an input, right?

40
00:03:43,870 --> 00:03:47,930
That is type of 'search'

41
00:03:48,210 --> 00:03:51,490
And let's also have a placeholder -

42
00:03:51,620 --> 00:04:02,740
let's close this - and placeholder that says 'search robots'

43
00:04:02,880 --> 00:04:15,080
We close this and save and we have to export: "export default SearchBox;", save, "Compiled successfully!"

44
00:04:15,080 --> 00:04:16,850
All right! We have our search box

45
00:04:16,850 --> 00:04:19,220
But, well, it's not searching anything right now

46
00:04:22,690 --> 00:04:29,130
Let's add this on a new line, just so it looks nicer. And it's always a good idea, just in case you want

47
00:04:29,130 --> 00:04:35,620
to add more things to the search box, to wrap everything in a "div"

48
00:04:35,670 --> 00:04:37,250
So I'm going to do that right now.

49
00:04:39,660 --> 00:04:44,070
And this "div" will just have a "className" of "padding2"

50
00:04:44,100 --> 00:04:50,180
again using [tag-ons], and with the "input" we can do a "className"

51
00:04:51,450 --> 00:04:52,920
and I just know these look good

52
00:04:52,920 --> 00:04:55,440
so I'm just going to copy and paste here

53
00:04:55,460 --> 00:04:56,860
just padding

54
00:04:56,970 --> 00:05:00,240
with background "lightest-blue"

55
00:05:00,240 --> 00:05:02,930
If I do this, and - let's go back

56
00:05:02,940 --> 00:05:03,600
All right

57
00:05:03,600 --> 00:05:04,800
This looks better -

58
00:05:04,830 --> 00:05:06,390
We want to center everything

59
00:05:06,540 --> 00:05:10,190
So maybe in the app we can just add a "className"

60
00:05:11,220 --> 00:05:14,570
equals to "text center"

61
00:05:14,580 --> 00:05:15,750
see if that works

62
00:05:17,010 --> 00:05:17,660
There you go

63
00:05:17,730 --> 00:05:19,370
That's much better

64
00:05:19,380 --> 00:05:21,380
I like this already

65
00:05:21,550 --> 00:05:25,610
Now, how can we make this interactive?

66
00:05:25,660 --> 00:05:33,600
Up until now we've just had these static web sites but real web sites are interactive, right?

67
00:05:33,660 --> 00:05:36,430
Well let's think about this logically

68
00:05:36,570 --> 00:05:39,360
We have an app

69
00:05:39,600 --> 00:05:41,920
We have a "SearchBox"

70
00:05:42,910 --> 00:05:53,220
And we have a "CardList", but the search box component needs to communicate with the card list, and same

71
00:05:53,220 --> 00:05:54,930
with the card list. "CardList"

72
00:05:54,960 --> 00:06:02,410
needs to know what is in the search box so that it can filter out robots accordingly

73
00:06:03,880 --> 00:06:10,030
Let's go back to our image that we have of one way data flow. Looking at this

74
00:06:10,030 --> 00:06:20,430
we have the app component, and then the card list component that has cards, and then the search box component

75
00:06:20,910 --> 00:06:22,790
that, well, doesn't have any children now

76
00:06:22,920 --> 00:06:30,030
But in order for these two to communicate we have a one way data flow, that is they need to send their

77
00:06:30,030 --> 00:06:36,170
information to their parent and the parent tells them what to do

78
00:06:37,230 --> 00:06:39,010
Now how can we do that

79
00:06:40,300 --> 00:06:46,870
Up until now we just had some data that we just trickled down, but we never had it where one of the children

80
00:06:47,020 --> 00:06:51,910
had to modify data or communicate with a neighbor.

81
00:06:54,650 --> 00:06:56,740
Well, in order to do this

82
00:06:56,740 --> 00:07:06,730
React has an idea of something called "state". Up until now we learned about props such as properties

83
00:07:06,730 --> 00:07:09,080
that we keep passing down

84
00:07:09,860 --> 00:07:15,150
but we've never changed them because React just reads the props.

85
00:07:15,170 --> 00:07:24,130
If I go to "CardList" it just reads the props that it receives and it just renders something. And this one-

86
00:07:24,130 --> 00:07:33,340
way data flow is really nice because this "CardList" is a pure function. It receives an input and then

87
00:07:33,400 --> 00:07:37,370
it always returns the same output

88
00:07:37,660 --> 00:07:42,760
So if robots are always the same it's always going to return the same thing

89
00:07:42,820 --> 00:07:48,430
It's deterministic, pure functions, and it's something that we've talked about before. And this is a really

90
00:07:48,430 --> 00:07:49,720
really good thing.

91
00:07:49,810 --> 00:07:56,200
These components are what's called "pure components", and some even call it "dumb components"

92
00:07:56,200 --> 00:08:01,480
It just means that they don't really need to know about anything other than the fact that they're pure

93
00:08:01,480 --> 00:08:04,680
functions that receive something and return something.

94
00:08:05,200 --> 00:08:11,480
And this is really nice because we always know what this is going to look like, and that's all we had

95
00:08:11,540 --> 00:08:12,870
up until this point

96
00:08:13,250 --> 00:08:18,640
But now we have to worry about something other than props

97
00:08:18,740 --> 00:08:22,840
Props never change. Props are always just inputs that we get

98
00:08:22,850 --> 00:08:24,370
and we've never modified them

99
00:08:25,180 --> 00:08:29,490
But in this case we need a memory in our app

100
00:08:29,680 --> 00:08:36,150
We need this to communicate with this, and also change and update accordingly

101
00:08:36,340 --> 00:08:44,380
And that's what "state" is in React. "State" - and you'll hear this in computer programming a lot - simply means

102
00:08:45,340 --> 00:08:54,060
the description of your app. A "state" is simply an object - an object that describes your application

103
00:08:54,430 --> 00:09:02,650
And this "state" which describes our application is the robots, and whatever's entered in the search box

104
00:09:04,110 --> 00:09:07,020
and "state" is able to change

105
00:09:07,110 --> 00:09:13,020
We're able to change the value of the search box, the value of the input, and we're able to change what

106
00:09:13,060 --> 00:09:15,190
robot's array means

107
00:09:15,210 --> 00:09:17,190
What gets displayed

108
00:09:17,290 --> 00:09:19,390
This is a rule that you just have to remember

109
00:09:19,570 --> 00:09:26,330
Props are simply things that come out of "state"

110
00:09:26,440 --> 00:09:34,570
So a parent feeds "state" into a child component and as soon as a child (components) component receives a

111
00:09:34,580 --> 00:09:42,460
"state" it's a property. That child can never change that property. The parent just tells it what the "state"

112
00:09:42,460 --> 00:09:47,630
is and the child receives it as "robots"

113
00:09:47,650 --> 00:09:58,090
So the first thing we need to do is to start being able to use "state" in our app, the description of what

114
00:09:58,600 --> 00:10:00,650
our "state" should be

115
00:10:00,670 --> 00:10:07,960
So let's just do a constant "state" for now and show you that our "state" needs to have a "robots" array

116
00:10:08,410 --> 00:10:14,360
and it needs to have, let's call it "searchfield"

117
00:10:14,610 --> 00:10:18,530
And this is just whatever our search field needs

118
00:10:18,840 --> 00:10:25,500
But in order to use "state" we have to go back to our original way that we created React components. If

119
00:10:25,500 --> 00:10:37,990
you remember this, when we first did "create React app", we create a class and we do that by saying "export

120
00:10:38,380 --> 00:10:40,420
default" or "export App

121
00:10:46,710 --> 00:10:51,540
extends React.Component"

122
00:10:51,670 --> 00:11:02,640
It extends the "Component" class, and again we can use shorthand here and just say… So now we can just remove

123
00:11:02,640 --> 00:11:03,630
React from here

124
00:11:04,510 --> 00:11:14,830
And this always has a render function that has to return something, which is this

125
00:11:18,990 --> 00:11:28,750
Again, it's just the syntax that you have to get used to. So if I save this - oh, and I made a mistake here, instead

126
00:11:28,750 --> 00:11:30,580
of "export" this should say "class"

127
00:11:30,790 --> 00:11:36,720
So, yeah, "class App extends Component" and then we do "export default App;"

128
00:11:36,730 --> 00:11:43,750
So again we're just declaring a class. I save and we just have something that says "state is assigned

129
00:11:43,750 --> 00:11:46,590
a value but never used"

130
00:11:46,740 --> 00:11:48,270
That's because that's pretty true

131
00:11:48,270 --> 00:11:49,150
we don't use it

132
00:11:49,200 --> 00:11:53,000
So how can we add "state"? Well, in React

133
00:11:53,010 --> 00:11:56,030
we simply do a constructor

134
00:11:56,040 --> 00:11:58,600
You might remember this from when we spoke about objects

135
00:11:59,630 --> 00:12:05,130
And this constructor, in here we can declare the state

136
00:12:05,330 --> 00:12:21,400
We simply say "this.state =", and in here we just put whatever we want our state to have

137
00:12:21,400 --> 00:12:24,630
So if I save this, I get

138
00:12:24,700 --> 00:12:27,610
"'this' is not allowed before super()"

139
00:12:27,610 --> 00:12:34,010
Again, something that you might remember from the advanced objects video in order to use "this"

140
00:12:34,300 --> 00:12:42,890
we have to do this weird thing where we call "super()" which calls the constructor of component

141
00:12:43,090 --> 00:12:49,890
If I do this and save, everything's working fine

142
00:12:49,960 --> 00:13:00,810
And now we have our "state", which is robots and search field, and this "state" as I've said before is what

143
00:13:00,810 --> 00:13:02,220
describes our app

144
00:13:02,220 --> 00:13:07,590
These are the things that can change, and that's what this "state" is - something that can change and affect

145
00:13:07,860 --> 00:13:08,720
our app

146
00:13:10,320 --> 00:13:17,160
And they usually live in the parent component, the component that is the parent that just kind of passes

147
00:13:17,180 --> 00:13:19,550
"state" to different components

148
00:13:19,550 --> 00:13:29,210
And now I can access "robots", not from here, but from "this.state.robots"

149
00:13:29,310 --> 00:13:34,100
And again, just React syntax that you'll have to get used to

150
00:13:34,270 --> 00:13:34,540
All right

151
00:13:34,550 --> 00:13:37,180
So everything is working as expected

152
00:13:37,490 --> 00:13:47,210
And do you see that our state, which is "robots", is now passed down as "props" so "CardList" accepts "robots"

153
00:13:47,330 --> 00:13:50,550
as "props" even though in the app.js 

154
00:13:50,690 --> 00:13:59,090
it's a "state". And like I said because "App" now owns "state" that includes "robots"

155
00:13:59,180 --> 00:14:02,540
it's allowed to change it. OK

156
00:14:02,630 --> 00:14:11,530
Now the way we can communicate them, we have these two valleys, and ideally in the search box I have something

157
00:14:11,530 --> 00:14:19,930
called "onSearchChange()", which again is a function that I'm just going to make up

158
00:14:20,500 --> 00:14:23,170
This is just a random name that I've created

159
00:14:23,650 --> 00:14:30,250
And "onSearchChange()" I want to say that every time the input changes, just like we did with DOM manipulation,

160
00:14:30,670 --> 00:14:37,580
we get an event, and within this event I'm going to "console.log" this event

161
00:14:41,430 --> 00:14:44,590
I've created a function, and I want

162
00:14:44,590 --> 00:14:48,740
any time this input changes to trigger "console.log"

163
00:14:49,170 --> 00:14:58,890
So we can pass this actually now. I can say "searchChange=[onSearchChange]", but again because this

164
00:14:58,890 --> 00:15:09,090
is an object we have to say "this." so that it says "this" (which is the "App") ".onSearchChange" is "searchChange"

165
00:15:10,110 --> 00:15:17,760
If I save this and now go to the search box, I now have "searchChange"

166
00:15:21,590 --> 00:15:25,910
as a function, so I can just say, just like in HTML -

167
00:15:25,930 --> 00:15:32,110
Remember in HTML I can do "onchange html", it's an event,

168
00:15:32,170 --> 00:15:36,040
we're just listening to "any time the input changes"

169
00:15:36,260 --> 00:15:39,720
So I can say "onChange="

170
00:15:42,420 --> 00:15:43,980
"[searchChange]"

171
00:15:43,980 --> 00:15:45,600
Let's see if that works

172
00:15:45,690 --> 00:15:46,730
I'm getting no errors

173
00:15:46,740 --> 00:15:53,290
If I go back to my app, I open up the console and I type in something, and look at that!

174
00:15:53,340 --> 00:16:01,120
I'm getting the event. And this is just something you have to remember is that with an event we always

175
00:16:01,120 --> 00:16:09,170
have "event.target.value" which should give us the value of the search term

176
00:16:09,190 --> 00:16:13,580
Let's save that and type in something here

177
00:16:15,160 --> 00:16:19,960
Look at that! We're now noticing the difference as we type

178
00:16:20,000 --> 00:16:22,760
So let's go over one more time what just happened

179
00:16:23,650 --> 00:16:25,640
And again I know this is tough

180
00:16:25,660 --> 00:16:31,170
This took me a while to get when we first started, but this diagram really explains it well

181
00:16:32,080 --> 00:16:34,180
I have my app component

182
00:16:34,180 --> 00:16:43,940
My search box, and my card list. Any time the search box changes, on change I'm going to run the function, I'm

183
00:16:43,940 --> 00:16:48,620
going to call this function

184
00:16:48,630 --> 00:16:51,020
And the way we call it is we add this

185
00:16:51,100 --> 00:16:58,240
Remember how when we did DOM events we defined the function and then every time the event happens it

186
00:16:58,240 --> 00:16:59,490
would call it.

187
00:16:59,920 --> 00:17:08,720
So we are saying every time the onchange event is triggered, call the search change function

188
00:17:08,950 --> 00:17:16,329
And if you remember the search change function which is a prop is the "onSearchChange" function that

189
00:17:16,329 --> 00:17:17,460
is defined in the app

190
00:17:17,470 --> 00:17:19,470
That's how we communicate with the parent

191
00:17:19,510 --> 00:17:24,880
It triggers the event, the parent says "Oh, run this function"

192
00:17:25,060 --> 00:17:29,810
And now this function gets run

193
00:17:29,940 --> 00:17:39,150
But now that I have the value of the search input, I can now directly communicate that search input to

194
00:17:39,330 --> 00:17:41,110
the "robots" list

195
00:17:41,130 --> 00:17:42,660
Let's see how that works

196
00:17:42,720 --> 00:17:55,950
We can create a variable, let's say "filteredRobots", and this will equal the "this.state.robots"

197
00:17:57,980 --> 00:18:00,190
and this "robots", which is the array

198
00:18:00,230 --> 00:18:08,240
- again this is how we access "state" - is going to use "filter", filtering our array

199
00:18:08,410 --> 00:18:17,290
We give it "robots", and now our array will have to return a condition, and the condition is going to be

200
00:18:18,820 --> 00:18:19,530
"robots"

201
00:18:19,560 --> 00:18:28,400
".name" and we're going to do something that we haven't seen before which is "to.LowerCase"

202
00:18:28,720 --> 00:18:33,850
And this is a method that comes with all strings, and it just makes everything lowercase

203
00:18:33,880 --> 00:18:39,840
And this is good for comparisons so we don't have to compare capitalized or lowercase

204
00:18:39,990 --> 00:18:51,640
And if the "name" of "robots", which is now lowercased, "includes" - it's another method and again it's pre-built

205
00:18:51,700 --> 00:18:58,450
into javascript - if it "includes" the "searchfield"

206
00:18:58,610 --> 00:19:02,940
And again we want to do "toLowerCase" in case

207
00:19:03,140 --> 00:19:08,140
Well in case we use capitals or lowercase, it works both ways

208
00:19:08,510 --> 00:19:09,260
And there it is

209
00:19:09,470 --> 00:19:16,370
If the name of the robots in lowercase includes - and this does the comparison -

210
00:19:16,530 --> 00:19:26,400
if anything in the string includes "toLowerCase", well, then only return the robots that returns true

211
00:19:26,400 --> 00:19:29,220
to this. Let's save -

212
00:19:29,270 --> 00:19:33,240
- oh, and you see here the how you get the 'searchfield' there because, well, it's part of the state

213
00:19:33,260 --> 00:19:38,190
I have to do "this.state.searchfield"

214
00:19:38,400 --> 00:19:42,150
If I save this, I get that

215
00:19:42,150 --> 00:19:44,720
"'filteredRobots' is assigned a value but never used"

216
00:19:44,850 --> 00:19:49,240
But don't worry, we can now console log this and see what we get

217
00:19:51,320 --> 00:19:59,970
if I save, and let's go back to our app, and if I search something here, oh, I get an error

218
00:20:00,110 --> 00:20:03,510
And this is an error that is very very confusing

219
00:20:03,530 --> 00:20:05,010
It is tricky the first time

220
00:20:05,120 --> 00:20:06,490
But bear with me here

221
00:20:06,620 --> 00:20:11,700
The problem right now is that the value of "this"

222
00:20:12,260 --> 00:20:23,090
well it's not referring to the "App", because the event happened in the "input", the value of "this" is, well,

223
00:20:23,090 --> 00:20:28,040
the input, and "input" doesn't have "state.robots"

224
00:20:28,490 --> 00:20:35,050
And this is a trick that you always forget, but just keep this in mind as a rule of thumb

225
00:20:36,060 --> 00:20:43,740
With anything that comes from React, so constructor and render are pre-built in React, any time you

226
00:20:43,740 --> 00:20:54,100
make your own methods on a component, use this syntax, so arrow functions, and this makes sure that the "this"

227
00:20:54,100 --> 00:20:58,020
value is according to where it was created, which is the "App"

228
00:20:58,210 --> 00:20:59,320
I know it's confusing

229
00:20:59,320 --> 00:21:00,610
You can up read more about it

230
00:21:00,610 --> 00:21:02,280
I'll leave a resource for it

231
00:21:02,290 --> 00:21:06,280
It's a tough topic to get, but again, rule of thumb -

232
00:21:06,280 --> 00:21:07,260
use the arrows

233
00:21:07,300 --> 00:21:16,550
If I do this now and I click, there you go - I now get "robots"

234
00:21:16,600 --> 00:21:18,250
But here's the thing

235
00:21:18,250 --> 00:21:24,610
Searchfield right now - you see that I still have 10 robots, it's not really filtering anything

236
00:21:24,880 --> 00:21:31,570
And that is because my "searchfield" is always an empty string. In order to update the state

237
00:21:31,660 --> 00:21:40,890
again another rule of React is to do "this.setState", and it's again a method that comes with React

238
00:21:40,900 --> 00:21:47,680
And anytime you want to change state you always do this, you don't do "this.state.searchfield ="

239
00:21:47,770 --> 00:21:49,290
- you never do that

240
00:21:49,300 --> 00:22:00,280
You have to do "this.setState", and within here we just say "searchfield is…" - and again we're using

241
00:22:00,280 --> 00:22:06,460
an object, so "searchfield is now going to be "event.target.value"

242
00:22:08,480 --> 00:22:20,870
If I save this and go back, you see that now everything is being filtered

243
00:22:20,930 --> 00:22:26,130
So I'm changing the state so that the "searchfield" always gets updated

244
00:22:26,150 --> 00:22:30,770
and now we're filtering the robots according to the changed "searchfield"

245
00:22:33,330 --> 00:22:33,620
OK

246
00:22:33,640 --> 00:22:37,320
So one last thing. Looking at this

247
00:22:37,570 --> 00:22:42,250
We have the fact that filter robots is still not assigned, and you're right

248
00:22:42,400 --> 00:22:48,400
If we look at this, we've now communicated the search box with the app, and we have the search field constantly

249
00:22:48,400 --> 00:22:48,940
changing

250
00:22:48,940 --> 00:22:56,740
So now we need to communicate it to the "filteredRobots". What we can do is that "filteredRobots" can now

251
00:22:56,740 --> 00:23:02,350
be used as props instead of "this.state.robots"

252
00:23:02,350 --> 00:23:03,100
So let's do that

253
00:23:03,160 --> 00:23:06,910
Let's move this down here

254
00:23:10,430 --> 00:23:17,060
And now we have access to "filteredRobots", and instead of passing "this.state.robots" we simply pass

255
00:23:17,690 --> 00:23:19,970
"filteredRobots"

256
00:23:20,120 --> 00:23:23,670
If I save this, make sure the search part saved as well

257
00:23:23,930 --> 00:23:29,940
And now I go back. I'm going to close the tab and let's check it out

258
00:23:33,200 --> 00:23:34,280
Look at that

259
00:23:34,430 --> 00:23:37,420
We have our app working

260
00:23:37,610 --> 00:23:38,610
How cool is that

261
00:23:39,960 --> 00:23:43,230
Let's go over it one more time to show you exactly what it does

262
00:23:45,150 --> 00:23:52,110
We have our "App" component that has two states - "robots" and "searchfield"

263
00:23:52,300 --> 00:24:01,120
And because "App" owns the state, any component that has "state" uses the "class" syntax so they can use the

264
00:24:01,150 --> 00:24:08,930
"constructor" function to create "this.state", and this "state" is what changes in an app

265
00:24:08,950 --> 00:24:11,380
It's what describes the app

266
00:24:11,380 --> 00:24:16,840
Remember when I said the virtual DOM is just a javascript object? The virtual DOM is just an object that

267
00:24:16,840 --> 00:24:27,190
collects this entire state and React uses this state to render and pass them down as props to these

268
00:24:27,190 --> 00:24:32,740
components so that these components that are just pure functions can just render

269
00:24:32,940 --> 00:24:38,010
And we always know that the app is going to look the same because, well, they're just simple pure functions

270
00:24:39,350 --> 00:24:44,500
We manage this state in here, the app is the only thing that can change this state

271
00:24:44,630 --> 00:24:52,880
But it can pass down things such as props, so we passed down "onSearchChange" to the "SearchBox", and the

272
00:24:52,880 --> 00:24:56,720
"SearchBox", every time there's an "onChange" on the input,

273
00:24:56,720 --> 00:24:59,760
it lets the app know "Hey, there was a change"

274
00:24:59,840 --> 00:25:00,840
"Run this function"

275
00:25:01,040 --> 00:25:07,570
It runs the function with the event and updates the state of the "searchfield" to whatever we type

276
00:25:09,600 --> 00:25:15,720
Now with the information that we have from the search box we can now communicate to the card list and

277
00:25:15,720 --> 00:25:26,100
tell it "Hey, I want to filter the "robots" state to now have only what includes in the "searchfield"

278
00:25:27,030 --> 00:25:34,970
and instead of passing that "this.state" to our "robots" we just passed the "filteredRobots"

279
00:25:35,130 --> 00:25:39,000
You might be asking yourself "Well, "robots" never really changes, does it?"

280
00:25:39,000 --> 00:25:43,620
"We always just create a new array called "filterRobots" and we always pass that down"

281
00:25:43,680 --> 00:25:46,540
"Does this need to be part of the state"

282
00:25:47,020 --> 00:25:53,550
And right now not really because we just have a hard coded "robots", but when we get later on in the

283
00:25:53,550 --> 00:25:56,080
course you'll see that that's not the case

284
00:25:56,220 --> 00:26:02,550
Most of the time you're getting the users or robots from another place over the internet in which

285
00:26:02,550 --> 00:26:08,610
case we will need "robots" to change from an empty array to an array

286
00:26:08,610 --> 00:26:14,480
after we go and grab all of our users

287
00:26:14,750 --> 00:26:15,410
Whoo! All right

288
00:26:15,530 --> 00:26:16,850
That was a lot

289
00:26:16,880 --> 00:26:23,000
I know, I know it's a lot of information, a lot of new syntax, but as you can see, with a few lines of

290
00:26:23,000 --> 00:26:30,320
code we built a pretty awesome app. In the next video we're going to finish this up and finalize our

291
00:26:30,320 --> 00:26:30,660
app

292
00:26:30,680 --> 00:26:33,490
so it looks as pretty as this

293
00:26:33,560 --> 00:26:35,130
I'll see you in that one. Bye!