React: why is mini app are not working correctly?

Good day! Deal with React'om, wrote a mini app with tasks:
But for some reason is not working as it should, although in theory should work as it should, namely:
Clicking on the delete button, the task should be deleted task, but in fact the latter is always removed, even if removed first. Broke my head with this error code is very little and as for me everything is fine with the code, but the application behaves is not clear...
June 14th 19 at 20:09
1 answer
June 14th 19 at 20:11
Do not use the indexes as keys
why? if I'm not mistaken even at the docks it is written that the possible indexes to use? - jaquelin_Litt commented on June 14th 19 at 20:14
it is important to understand that, and how I will learn. just where have just seen so used splints... - jaquelin_Litt commented on June 14th 19 at 20:17
when you removed the task from the array, as Virtual DOM will determine what to delete from the DOM a? Correctly, it will look at the key.

For example, delete the second Tusk.

In the array after the removal we have stocks left? 0, 1, 2
Sravanam: real DOM [0,1,2,3] and state [0,1,2]
Obviously, vanished the key 3, and therefore from the DOM and remove it will.
I deleted the second Tusk, and gone is the element with the last index

Now take a situation where the key is unique
Compare: real DOM [id1, id2, id3] and state [id1, id3]
Obviously, vanished the key id2, consequently of the DOM-a to remove will
I deleted the second task, he disappeared - Krista_Bi commented on June 14th 19 at 20:20
, uhh, just did not understand, but now I'll sit and pick to understand exactly just I this splint delial all the guy do rabotalo, I don't know why, maybe because the older version of react it rolled. only I was creating the components as needed in the new versions and not used ref's - jaquelin_Litt commented on June 14th 19 at 20:23

Find more questions by tags React