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.