In React ES6, why does the input field lose focus after typing a character?

Question

In my component below, the input field loses focus after typing a character. While using Chrome\'s Inspector, it looks like the whole form is being re-rendered instead of ju

Answer 1

You have to use a unique key for the input component.

The key="random1" cannot be randomly generated. For example,

uuid() will generate a new set of string for each rerender. This will cause the input to lose focus.

If the elements are generated within a .map() function, use the index to be part of the key.

{rens.map((ren,i)=>{
    return(
    

       {ren}{i}
)
}

This will solve the issue.