In the last lecture, we started out putting a list by mapping an array into an array with jsx elements
and this is the common pattern of outputting lists in react.
You just use javascript because hey, everything is javascript,
I can't say it enough. Now
we still got some things to improve,
for example, this key warning we're getting.
I'll come back to that soon,
however before I do that, let's see how we can actually manipulate this array,
and for that let me add a new click listener.
Inside our person components here, we actually already have a click listener on the first paragraph and
there we execute this click prop. Prior to our change there,
we then called the switchNameHandler.
Now I will remove this method,
I'm not calling it anymore from anywhere in my application,
instead I want to add a new handler,
I'll name it deletePersonHandler
and you might be able to guess what this will do. Here,
I want to delete a person from my array of persons and I want to execute this when I click this first
paragraph in a person.
So again there a click prop is executed as a method,
so I should add a click prop to my person here click and there, I should reference this deletePersonHandler
Now when I click the person I want to execute this method and I want to delete this person here of course,
now for that, I need to know which person is this case since we output a dynamic list here, I don't
know by now.
The good thing is this map method also exposes a second argument,
besides the person which I use thus far, I can add a second argument or receive it I should say, the index
in the array and as a side note if you use more than one argument in an ES6 arrow function, you have
to wrap the arguments in parentheses.
So we get this index for free,
passed in automatically and I want to pass it to the deletePersonHandler.
I will use the syntax where I executed as a arrow function here and hence now am able to pass index
like this.
The alternative would be bind this comma index.
So now we can receive this in the deletePersonHandler,
there of course I need to be prepared to get the person index and I can now use it in here to update
my state accordingly.
First of all, I will fetch all the persons so I will reach out to this state persons and then I want
to create a new version of that person's array.
I simply want to call persons splice and I want to start splicing a person index and splice one element.
This simply removes one element from the array and thereafter I can call this set state and set persons
to persons to my persons constant which was updated though by splicing one element.
And in case you're wondering how I can edit a constant,
keeps in mind arrays and objects are reference types so I didn't assign a new value to the constant,
it is only holding a pointer,
I only changed the element it was pointing to,
that's just some general javascript knowledge though.
So with this we set the state of the persons to the new persons, the updated persons
and this approach has a flaw we'll fix soon.
Let's try it out though,
let me save this file and let's go back toggle persons and we get the same warnings as before.
Let's click on the paragraph as you can see, it does work.
We can now remove the persons and exactly the one on which you clicked like Mnau or Max.
However I said that this approach has a flaw and I will dive deeper into that flaw in the next lecture.