1
00:00:02,190 --> 00:00:06,300
In the last lecture we started removing persons,

2
00:00:06,300 --> 00:00:11,830
we did this by getting access to all the persons in the state, removing the one element we wanted to

3
00:00:11,830 --> 00:00:16,320
remove by using the index of the person and updating the state.

4
00:00:16,320 --> 00:00:23,700
The flaw of this approach is that in javascript, objects and arrays are reference types,

5
00:00:23,700 --> 00:00:31,860
so when I get persons from my state as I do here I actually get a pointer to the original person's object

6
00:00:31,860 --> 00:00:35,370
managed by react, to the original state

7
00:00:35,370 --> 00:00:43,560
I should say. If I then splice it here, I already mutate this original data and whilst it does work without

8
00:00:43,560 --> 00:00:47,180
throwing an error, this is not really how you should do it,

9
00:00:47,190 --> 00:00:52,850
this can lead to unpredictable apps and is definitely a bad practice.

10
00:00:52,920 --> 00:01:00,810
A good practice is to create a copy of your persons array before manipulating it and a simple way

11
00:01:00,810 --> 00:01:08,430
of doing this is by calling the slice method. Slice without arguments simply copies the full array and

12
00:01:08,430 --> 00:01:10,950
returns a new one which is then stored here.

13
00:01:11,190 --> 00:01:18,570
And you can now safely edit this new one and then update to react state with your new array.

14
00:01:19,400 --> 00:01:28,950
An alternative to this approach would be to use it a ES6 feature, the spread operator. You can simply

15
00:01:28,950 --> 00:01:37,400
set persons equal to a new array and this new array can now use the spread operator which are three dots

16
00:01:37,580 --> 00:01:39,540
might look strange but this is a javascript

17
00:01:39,540 --> 00:01:43,650
operator where are you now reach out to state persons.

18
00:01:43,700 --> 00:01:50,180
What this does is it spreads out the elements in this array into a list of elements which simply then

19
00:01:50,180 --> 00:01:56,920
gets added to this array, so that now we have an array, a new array, with the objects from the old array

20
00:01:57,170 --> 00:01:59,480
but not the old array itself.

21
00:01:59,720 --> 00:02:02,720
So this is basically an equivalent to the slice approach,

22
00:02:02,720 --> 00:02:04,350
use whichever one you prefer,

23
00:02:04,490 --> 00:02:11,060
this is the more modern one and you will see this spread operator more often throughout the course.

24
00:02:11,080 --> 00:02:16,050
With that we get the same behavior as before and we didn't fix the error messages with that,

25
00:02:16,060 --> 00:02:21,790
it still works as before but I can tell you it is the better approach of updating state.

26
00:02:21,800 --> 00:02:28,160
You should always update state in an immutable fashion, so without mutating the original state first.

27
00:02:28,430 --> 00:02:33,780
Create a copy, change that and then update the state with said state.

28
00:02:33,830 --> 00:02:37,590
Still there are things we can and should improve about our list though.