React.js - input losing focus when rerendering

Question

I am just writing to text input and in onChange event i call setState, so React rerenders my UI. The problem is that the text input always lose a f

Answer 1

I got the same behavior.

The problem in my code was that i created a nested Array of jsx elements like this:

const example = [
            [
                ,
                
Test 2
,
                
Test 3
,
            ]
        ]

...

render = () => {
    return 
{ example }
}

Every element in this nested Array re-renders each time I updated the parent element. And so the inputs lose there "ref" prop every time

I fixed the Problem with transform the inner array to a react component (a function with a render function)

const example = [
            
        ]

 ...

render = () => {
    return 
{ example }
}

EDIT:

The same issue appears when i build a nested React.Fragment

const SomeComponent = (props) => (
    
        
        
    
);

const ParentComponent = (props) => (
    
        
        

    
);