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

For me, this was being caused by the search input box being rendered in the same component (called UserList) as the list of search results. So whenever the search results changed, the whole UserList component rerendered, including the input box.

My solution was to create a whole new component called UserListSearch which is separate from UserList. I did not need to set keys on the input fields in UserListSearch for this to work. The render function of my UsersContainer now looks like this:

class UserContainer extends React.Component {
  render() {
    return (
      

         (
            

              
              
            
          )}
        />
      
  
    )
  }
}

Hopefully this helps someone too.