Key Value pair component not deleted properly in React

In React with patternfly I’m trying to create a component for entering http header and values in a key value format. But when I delete second row, log says it’s deleted and rendered properly. but visually last row only deleted. Link for codesandbox https://codesandbox.io/s/react-key-value-component-ctn3l?file=/src/App.tsx

Please help me with your inputs to solve this issue. Thanks for your time.

output log

Answer

As @Vibhav commented, this is happening because of index is used as key. This link talks in detail.
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

Leave a Reply

Your email address will not be published. Required fields are marked *