React losses input focus with many inputs

Question

I have tried several practices for many similar cases, but none is applicable for my case. The inputs of the table always lose focus after input one letter in it. How to avoid it?

I provide a code in snippet on codesandbox.io

Link: https://codesandbox.io/s/84wm4v4099

Answer 1

The problem is in your key triggering a complete re-render of the element every time render is called. Try this instead:

return (
  <PTDR key={`input${idx}`}>
    <InputTable...

See the working example here