title: ReactJS: unhide + focus an input field
body: <p>I would like to show and focus an input field at the same time. I am looking for advice on the most elegant way to do this.</p>
  
  <p>The simplistic approach, which doesn't work, would be:
   * The element that contains the input field makes some state change which unhides the input box by setting display = ''. I got this part to work.
   * The element that contains the input field gets the child element, via a ref, and calls .focus() on its DOM element. This is the part that doesn't work.</p>
  
  <p>I think this is because the style change (display = '') has not propagated to the real DOM, so the focus() doesn't work.</p>
  
  <p>I can think of ways to fix this (the input field could have a state var isFocusing, which calls focus() only after rendering has taken place), but I would to hear if there's a more elegant way of achieving this.</p>
  
  <p>Thanks!</p>