0

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

Nantha Kumar
  • 29
  • 7
  • This is happening since you are using index as a key. Have a look on this https://stackoverflow.com/questions/59517962/react-using-index-as-key-for-items-in-the-list – Vibhav Feb 08 '21 at 17:44

1 Answers1

0

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

Nantha Kumar
  • 29
  • 7