React autoFocus sets cursor to beginning of input value
<p>I have a controlled input that has a value initially showing. 
I have set that input to autoFocus but the cursor appears at the beginning of the input when I am wanting it to appear at the end. I understand this might be because the autoFocus is added before the value is but I'm not 100% sure. </p>

<p>What would be the best way to accomplish the cursor initializing at the end of the input field?</p>

<pre><code>var Test = React.createClass({

    getInitialState: function() {
        return {
           teamId: 'fdsfds'
        };
    },

    render: function() {
        return (
                &lt;input type="text" autoFocus value={this.state.teamId} onChange={this.setTeamId} /&gt;
        );
    },

    setTeamId: function(event) {
        this.setState({ teamId: id });
    },

});

ReactDOM.render(
  &lt;Test /&gt;,
  document.getElementById('container')
);
</code></pre>

<p><a href="https://jsfiddle.net/69z2wepo/34486/" rel="noreferrer">https://jsfiddle.net/69z2wepo/34486/</a></p>