All language subtitles for 027 Filtering State_en

af Afrikaans
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,590 --> 00:00:07,760 OK, now that we have our search field value stored on our state, let's actually use it to filter out 2 00:00:07,760 --> 00:00:11,070 the monsters where their names don't match the field. 3 00:00:11,900 --> 00:00:15,140 Now, how we'll do this is in the render. 4 00:00:16,120 --> 00:00:24,730 We don't want to actually modify our state's monster array because we want to keep the raw data in case 5 00:00:24,730 --> 00:00:30,330 somewhere in this component we need to use the base unmodified array. 6 00:00:31,810 --> 00:00:39,090 What we'll do instead is make a new array using the dot filter method that we've learned. 7 00:00:40,390 --> 00:00:46,450 So what we'll do is we'll actually first use a concept called structuring. 8 00:00:47,420 --> 00:00:55,610 And what the structuring allows us to do is pull properties off of an object and set them to constants 9 00:00:55,910 --> 00:00:58,180 that we put inside of here. 10 00:00:58,820 --> 00:01:04,580 So the syntax is we say CONSED and then we put our bracket notation. 11 00:01:06,250 --> 00:01:14,050 And here will use the actual objects we want a D structure from, so the state object is what we want 12 00:01:14,050 --> 00:01:15,580 to pull the properties off of. 13 00:01:16,700 --> 00:01:24,860 And what we want to do is use the same property name that we want to set as the constant, so when we 14 00:01:24,860 --> 00:01:32,720 say monsters and search field like this will be pulling off the search field value and the monster's 15 00:01:32,720 --> 00:01:40,970 value off of our state object and setting them to constants called monsters and search field, this 16 00:01:40,970 --> 00:01:49,820 is the equivalent of saying Konsta monsters equals this state monsters and this and consed search field. 17 00:01:51,610 --> 00:01:54,250 Is equal to this state search field. 18 00:01:55,520 --> 00:02:00,850 It's just an easier way and a quicker way for us to write this out. 19 00:02:03,420 --> 00:02:09,570 And now that we have our monsters and search field, what we'll do is set a new contest called Filtered 20 00:02:09,570 --> 00:02:10,259 Monsters. 21 00:02:11,960 --> 00:02:19,070 That we will set as our monsters don't filter right, and we are from our filter method, we get back 22 00:02:19,070 --> 00:02:26,330 a new array based off of the function that we pass into it where we'll get the monster that it's currently 23 00:02:26,330 --> 00:02:27,260 iterating over. 24 00:02:28,610 --> 00:02:31,970 And what we want to do is take the name. 25 00:02:33,190 --> 00:02:39,580 Called to lower case on it, which is a method on all strings, and here we see convert's, all the 26 00:02:39,580 --> 00:02:45,190 AlphaBeta characters in a string to lowercase, and we want to do this because we don't want our search 27 00:02:45,190 --> 00:02:46,840 to be case sensitive. 28 00:02:47,380 --> 00:02:53,760 If we did, we would just not use the two lowercase and then we'll call DOT includes. 29 00:02:54,310 --> 00:02:58,630 And what this includes method does is similar to our array method. 30 00:02:59,050 --> 00:03:04,390 It just checks whether or not the string value we pass inside of our includes. 31 00:03:05,370 --> 00:03:13,710 Is actually in the string that it's being called on, so here we'll use our search field and we also 32 00:03:13,710 --> 00:03:15,270 want to lowercase it. 33 00:03:16,370 --> 00:03:25,100 Because, again, we want to make sure that if the user types in capitals, we don't want that to be 34 00:03:25,100 --> 00:03:26,120 case sensitive either. 35 00:03:27,040 --> 00:03:33,610 So includes just like the array method includes, will return true or false, based off of whether or 36 00:03:33,610 --> 00:03:38,790 not this string includes the string we're passing to it. 37 00:03:39,860 --> 00:03:46,790 And now, instead of passing in our state of monsters, we'll just pass in our new filtered monsters 38 00:03:47,540 --> 00:03:50,300 and now we see that as we type. 39 00:03:52,940 --> 00:03:58,850 We're filtering out the monsters that don't have what we've typed in inside of their name. 40 00:04:00,000 --> 00:04:04,950 Now, you'll notice that our component is actually re rendering every time. 41 00:04:06,110 --> 00:04:13,790 This is because whenever set state is called and the properties change, react, renders our component, 42 00:04:14,600 --> 00:04:22,700 it recalls the render method, which means that our filtered monsters method here is actually getting 43 00:04:22,700 --> 00:04:23,480 called again. 44 00:04:24,200 --> 00:04:31,910 And this is great because what we've done is we've triggered this set state whenever they've type something 45 00:04:31,910 --> 00:04:41,090 in which in turn sets the state value of search field, which then in turn causes our component to re 46 00:04:41,090 --> 00:04:43,730 render and recall the render method. 47 00:04:44,740 --> 00:04:52,480 Which then filters out the monsters by calling our monsters dot filter again, setting a new array, 48 00:04:52,750 --> 00:04:57,870 which it'll then pass to our card list, which then renders card lists. 49 00:04:58,270 --> 00:05:07,870 And this way we're able to just dynamically live update our card list based on what we're typing in. 50 00:05:09,760 --> 00:05:18,160 And this is what's great about react is that React is able to take control of what to render, what 51 00:05:18,160 --> 00:05:26,650 to render in its views without us having to do all of the extensive calls of showing elements and hiding 52 00:05:26,650 --> 00:05:30,930 elements react, is able to do so for us. 53 00:05:30,970 --> 00:05:39,190 As long as we understand the rules now, we will definitely explore this in greater depth a little bit 54 00:05:39,190 --> 00:05:45,360 later, because right now we have to just expand upon some other concepts. 55 00:05:45,730 --> 00:05:53,970 But I promise you that we will take a deeper dive into how this works in just a little bit. 6013

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.