All language subtitles for 003 Using Stateful Lists_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 Download
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:02,160 --> 00:00:03,969 So how could we now update 2 00:00:03,969 --> 00:00:08,250 this expenses array whenever a new expense is being added? 3 00:00:08,250 --> 00:00:10,570 Well for this, we need to go to App.js 4 00:00:10,570 --> 00:00:13,243 because that is where we have this expenses array. 5 00:00:14,140 --> 00:00:17,620 There, we also have this addExpenseHandler function 6 00:00:17,620 --> 00:00:20,200 which we added in the last course section 7 00:00:20,200 --> 00:00:23,710 which has triggered whenever a new expenses added. 8 00:00:23,710 --> 00:00:27,280 And we even received the expense as a parameter here. 9 00:00:27,280 --> 00:00:31,120 So all we got to do is we have to add this expense 10 00:00:31,120 --> 00:00:32,473 to this expenses array. 11 00:00:33,360 --> 00:00:35,160 But of course, if we just edit like this 12 00:00:35,160 --> 00:00:37,920 nothing would happen because you already learned 13 00:00:37,920 --> 00:00:41,330 that just because you change some variable, 14 00:00:41,330 --> 00:00:44,260 React won't update the component. 15 00:00:44,260 --> 00:00:48,330 Instead to achieve that, you need to use state. 16 00:00:48,330 --> 00:00:50,560 And therefore here in App.js, 17 00:00:50,560 --> 00:00:52,660 where we manage our expenses, 18 00:00:52,660 --> 00:00:56,640 we now wanna import useState from React 19 00:00:56,640 --> 00:00:59,470 so that we can register some state here. 20 00:00:59,470 --> 00:01:02,240 And I will actually grab this array here, 21 00:01:02,240 --> 00:01:05,040 this constant and extract that out 22 00:01:05,040 --> 00:01:08,480 of this component function and instead store it here 23 00:01:08,480 --> 00:01:12,500 and name it Initial Expenses 24 00:01:12,500 --> 00:01:16,100 or Dummy Expenses since that's what it is. 25 00:01:16,100 --> 00:01:19,160 So that this actually is just some dummy data 26 00:01:19,160 --> 00:01:22,400 which we can use to initialize our state with. 27 00:01:22,400 --> 00:01:25,030 But then inside of the app component function 28 00:01:25,030 --> 00:01:29,140 we call useState and I'll pass my dummy expenses 29 00:01:29,140 --> 00:01:31,320 so this array full of dummy data 30 00:01:31,320 --> 00:01:33,220 as an initial state value 31 00:01:33,220 --> 00:01:36,330 so that we have some initial expenses to display. 32 00:01:36,330 --> 00:01:39,370 But then here, we can again use de-structuring 33 00:01:39,370 --> 00:01:41,800 as I showed it to you in the last section 34 00:01:41,800 --> 00:01:43,620 to get access to our expenses 35 00:01:43,620 --> 00:01:47,293 and to the set expenses state updating function. 36 00:01:48,920 --> 00:01:52,840 And now that we got this here in the addExpenseHandler 37 00:01:52,840 --> 00:01:55,120 where we wanna add a new expense, 38 00:01:55,120 --> 00:01:59,290 we can call setExpenses to set our expenses array 39 00:01:59,290 --> 00:02:02,583 to a new array which includes this new expense. 40 00:02:03,480 --> 00:02:05,500 So how should we update this? 41 00:02:05,500 --> 00:02:08,289 Well, we could pass a new array here 42 00:02:08,289 --> 00:02:10,720 and then let's say we wanna add the new expense 43 00:02:10,720 --> 00:02:12,750 as the first item in the array. 44 00:02:12,750 --> 00:02:16,520 For that we could add the expense which we're getting here 45 00:02:16,520 --> 00:02:19,010 as an item to this array and then use 46 00:02:19,010 --> 00:02:22,610 the spread operator on the existing expenses 47 00:02:22,610 --> 00:02:25,990 to pull out all the existing array elements 48 00:02:25,990 --> 00:02:28,530 and populate the rest of this new array 49 00:02:28,530 --> 00:02:31,060 with those existing elements. 50 00:02:31,060 --> 00:02:34,950 We can use the spread operator not just on objects 51 00:02:34,950 --> 00:02:36,370 but also on arrays. 52 00:02:36,370 --> 00:02:38,600 And again, that's not a React feature. 53 00:02:38,600 --> 00:02:40,683 That's a standard JavaScript feature. 54 00:02:41,900 --> 00:02:44,720 However, if we would update the state like this 55 00:02:44,720 --> 00:02:47,050 it would not really be correct, 56 00:02:47,050 --> 00:02:49,740 as you learned in the last core section. 57 00:02:49,740 --> 00:02:52,240 Instead, if you update your state 58 00:02:52,240 --> 00:02:54,950 depending on the previous state 59 00:02:54,950 --> 00:02:58,000 or to previous snapshot of this state, 60 00:02:58,000 --> 00:03:01,000 you should use this special function form 61 00:03:01,000 --> 00:03:03,630 for this state updating function. 62 00:03:03,630 --> 00:03:06,710 So it would be passed a function as argument 63 00:03:06,710 --> 00:03:08,840 to this state updating function 64 00:03:08,840 --> 00:03:11,690 and that function will automatically receive 65 00:03:11,690 --> 00:03:14,340 the latest state snapshot. 66 00:03:14,340 --> 00:03:17,010 So here we would then get our previous expenses 67 00:03:17,010 --> 00:03:18,930 automatically by React. 68 00:03:18,930 --> 00:03:21,600 And we would return our new array 69 00:03:21,600 --> 00:03:24,450 where we add this expense which we're getting 70 00:03:24,450 --> 00:03:28,410 as a parameter here and where we then add 71 00:03:28,410 --> 00:03:31,910 our previous expenses with that spread operator. 72 00:03:31,910 --> 00:03:35,120 And that's the clean way of updating our state 73 00:03:35,120 --> 00:03:39,933 when it's based on an older snapshot of that same state. 74 00:03:41,850 --> 00:03:45,090 Now with that, we add our new expense. 75 00:03:45,090 --> 00:03:48,520 And now since we're using our expenses state here 76 00:03:48,520 --> 00:03:50,480 to pass it to expenses, 77 00:03:50,480 --> 00:03:53,720 we should automatically have a dynamic list 78 00:03:53,720 --> 00:03:57,220 which automatically updates when items are added. 79 00:03:57,220 --> 00:04:02,220 So if we now add a book for $29.99 and pick some date here, 80 00:04:03,930 --> 00:04:07,910 we see that being added here as a first item. 81 00:04:07,910 --> 00:04:12,510 So this is working and now this is a truly dynamic list 82 00:04:12,510 --> 00:04:16,470 by using state and by outputting these items 83 00:04:16,470 --> 00:04:18,360 with this map method. 84 00:04:18,360 --> 00:04:22,029 And that's how you output lists of data dynamically 85 00:04:22,029 --> 00:04:23,830 with React. 86 00:04:23,830 --> 00:04:26,600 Now let's have a look at this key warning 87 00:04:26,600 --> 00:04:28,303 and what that is all about. 6877

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