title: Is it possible to set the "tab position" in an html doc using React
body: <p>Assume I have this component:</p>
  
  <p><a href="https://i.stack.imgur.com/rAeHZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rAeHZ.png" alt="enter image description here"></a></p>
  
  <pre><code>   React.createClass({
        getInitialState: function() {
          return {pg: 0};
        },
        nextPage: function(){
          this.setState({ pg: this.state.pg+1} )
        },
        render: function() {
          var inputs = [ &lt;input key={1} placeholder="one"/&gt;, 
                         &lt;input key={2} placeholder="two"/&gt;, 
                         &lt;input key={3} placeholder="three"/&gt;]
          if(this.state.pg === 1){
            inputs = [ &lt;input key={4} placeholder="four"/&gt;, 
                       &lt;input key={5} placeholder="five"/&gt;, 
                       &lt;input key={6} placeholder="six"/&gt;]
          }
          return(
            &lt;div&gt;
                &lt;h1&gt;start here&lt;/h1&gt;
                {inputs}
                &lt;button onClick={this.nextPage.bind(this)}&gt;next&lt;/button&gt;
            &lt;/div&gt;
          );
        }
      });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/69z2wepo/75909/" rel="nofollow noreferrer">https://jsfiddle.net/69z2wepo/75909/</a></p>
  
  <p>I am aiming for a very easy workflow. Inputs placed one after another can be edited without needing a mouse. The process would go like this</p>
  
  <ul>
  <li>Click "start here" to set the "tab position"</li>
  <li>hit tab</li>
  <li>enter a value, hit tab</li>
  <li>enter a value, hit tab</li>
  <li>enter a value, hit tab</li>
  <li>hit enter</li>
  </ul>
  
  <p>However when I change to next page, I need to manually click "start here" in order to be able to do this again. </p>
  
  <p>Is there anyway I can automatically move the tab position to "start here"? (I don't want to focus on the first input element until the user hits Tab)</p>