title: how react programmatically focus input
body: <p>I'm trying to implement a very simple use case, a UI feature, where:</p>
  
  <ol>
  <li>There is a label with some content in it</li>
  <li>If clicked, a text input replaces it with the content of label available</li>
  <li>User can edit the content</li>
  <li>When enter is pressed, the input hides and label is back with updated content</li>
  </ol>
  
  <p>I could get finally all correct (in fact with a MongoBD backend, redux, etc.), and the only thing I couldn't ever do (paying a complete day in googling and reading S.O.F similar posts) was this:</p>
  
  <p>When my text input appears, I can't transfer focus to it! First I tired this way:</p>
  
  <pre><code>&lt;div className={((this.state.toggleWordEdit) ? '' : 'hidden')}&gt;
  &lt;input id={this.props.word._id} className="form-control"
          ref="updateTheWord" 
          defaultValue={this.state.word}
          onChange={this.handleChange}
          onKeyPress={this.handleSubmit}
          autoFocus={this.state.toggleWordEdit}/&gt;&lt;/div&gt;
      &lt;div className={((this.state.toggleWordEdit) ? 'hidden' : '')}&gt;
        &lt;h3 onClick={this.updateWord}&gt;
          {this.state.word}&lt;/h3&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>but autoFocus sure didn't work (I "guess" because the form is rendered, but in hidden state, making autoFocus useless). </p>
  
  <p>Next I tried in my this.updateWor, many of suggestions I found on google and S.O.F.:</p>
  
  <pre><code>this.refs.updateTheWord.focus();
  </code></pre>
  
  <p>which together with similar suggestions all didn't work. Also I tried to fool React just to see if at all I can do something! I used real DOM:</p>
  
  <pre><code>    const x = document.getElementById(this.props.word._id);
      x.focus();
  </code></pre>
  
  <p>and it didn't work either. One thing I even could not understand to put into word is a suggestion like this:
  <a href="https://stackoverflow.com/a/39457349/2275800">having ref as a method (I "guess")</a>
  I didn't even try it because I have multiples of these components and I need ref to further get value of, per component, and I couldn't imagine if my ref is not named, how I could get the value of!</p>
  
  <p>So could you please give an idea, helping me to understand that in case I'm not using a Form (because I need a single input box replacing a label) how I could set its focus when it's CSS (Bootstrap) class is losing 'hidden' please?</p>