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

I am not authorised to comment then it must be an answer. I had similar issue and Answer from Alex Yan was corect.

Namely I had that function

const DisplaySearchArea =()=>{return (arrayOfSearchFieldNames.map((element, index)=>{return(
 {this.setState({ [element]: e.target.value }); console.log(e.target)}}
onMouseEnter={e=>e.target.focus()}/>
)}))}

that behaves OK with FF and not with Chrome when rendered as When render as {...} it's OK with both. That is not so 'beaty' looking code but working, I have already been told to have tendency to overuse lambdas.