Now that we add a lot of functionality and learned about that key, let's finetune our application
here a bit more because in the person we still have that input where we have the onChange handler where
we try to execute changed this prop and also get the value as an input.
And in the end, the goal is that if we type here, we adjust the name of the user for which we type this.
Now that we render a list and have truly dynamic content we can finally set this up in a truly dynamic
way.
So what we need to do is we simply need to provide this change property pointing to some event listener
or to some method which correctly updates the state.
So here I will add changed and now we need to point us to some method,
we got the nameChangedHandler,
so let's simply use that here.
Let's point to the nameChangedHandler
and now here, in this nameChangedHandler, I need two pieces of information. I need to get the events still
to get access to the event target value,
so to what the user entered, but I also expect a second input.
I want to get the ID of the user to update or the index in the array,
but now since we assigned IDs,
Why not use that?
So therefore down here I will again use this function syntax to conveniently pass that data.
Now this function here, the overall function is the one which gets executed upon the onChange event.
So here is where we get the event object just as we before
got it when we didn't assign any function at all directly in the nameChangedHandler,
now we get it here because this is now the first function which gets executed, this anonymous function
we define here.
I can then pass it on to the nameChangedHandler
and I also want to pass person ID to it.
The person ID of course is available since we're inside the map method here,
So we got access to the person and hence to the ID
and with that we now can use that information in the nameChangedHandler. We want to update the state
but of course only for the person into which input field we typed.
So we need to find that person, the single person and we can do this by reaching out to the state, to
the persons there and by calling find. This again is a default javascript method which gives us this
person.
We can also use find index to find the element in an array but then get the index of that element and
yes we could have passed the index directly into this function,
I just want to show you this alternative approach taken advantage of the ID. Find index takes a function
as an input just as map did and just as a map, it will execute this function on every element in the
array.
So here I will execute a function where I get the person, this argument name is up to you but person
is already taken by a constant,
where I get this person as an input and then I get the function body.
Now unlike map here I don't map this element into something new
instead here I have to return true or false depending on whether this is the person I was looking for
or speaking generally if this is the element I was looking for or not.
Now it is the person I was looking for
if P ID,
So this single person I'm currently looking at.
Again keep in mind this function is executed for every element in this array.
If that is equal to the idea I receiveed as an argument to this function, that's equal that will return
true,
and then person, index maybe is a better name, will hold the index of the person in their array for
which the IDs are equal.
I can then get the person itself by reaching out to these state persons and accessing the element at
the person index, the index I just fetched here.
Now just as before,
it is a good practice to not mutate the state directly and a person in the person's array as you can
clearly confirm here is a javascript object.
Now as I told you javascript objects are reference types so we shouldn't mutate them directly because
we only get a pointer when we reach out to person here and hence we would mutate the original object
to which this pointer points.
So the better approach is to create a new javascript object like this and then use this spread operator
in front of the object I'm fetching.
Just like with the array it's also available for objects and it will distribute all the properties
of the object we fetch here into this new object we're creating here.
And here we also got an alternative approach which I won't use but the alternative approach using
without the spread operator would be to use object assign a default javascript function where we pass
an empty object as the first argument and then the object which properties you want to assign into
it as the second object,
or the second argument I should say.
So object assigned with an empty object and then the object of which we want to get the properties
is the alternative.
But I'll comment that out because I want to use the more modern approach of the spread operator, you
can absolutely use both
though, there is no better or worse here.
So with that I get the person.
Now I want to update the person name of course and I can do this because I got a copy,
I'm not manipulating the original object now and I can set it to event target.value, just as
we did before.
Now I need to update the array of course and I want to update the array at this position I fetched here.
So just as before I can now get my persons, the whole array with the spread operator or with slice
by reaching out to state persons.
And now I can update it at one position, persons, person index should now be my updated person here
and again I'm always working with copies here.
Now we got an updated person's array and this finally allows us to set the state here and set it to this
updated persons array which is a copy of the old array where we updated one element with the updated
person where we adjusted the name.
A lot of code but the best way of doing it, the most efficient way without mutating the state,
and now if we save this what we should see is that we no longer get that warning from before, we see
all the names here
and I can start typing here and I update them for the object to which the input belongs.
So now we get a truly flexible component here,
a truly flexible application taking advantage of modern features to render this list efficiently and
interact with it efficiently.
Super important.