title: Stop cursor jumping when formatting number in React
body: <p>I have an input field on my react component that shows the line price for an item (two decimal places with thousands separators).  I want the value shown to be in money format when the component first renders and also to be kept in money format as user types in the field.</p>
  
  <p>At the moment I have the following code in my component:</p>
  
  <pre><code>var React = require('react');
  import accounting from 'accounting';
  
  MoneyInput = React.createClass({
      propTypes: {
          name: React.PropTypes.string.isRequired,
          onChange: React.PropTypes.func.isRequired,
          value: React.PropTypes.number,
          error: React.PropTypes.string,
      },
  
      onChange(event) {
          // get rid of any money formatting
          event.target.value = accounting.unformat(event.target.value);
  
          // pass the value on
          this.props.onChange(event);
      },
  
      getValue() {
          return accounting.formatNumber(this.props.value, 2)
      },
  
      render() {
  
          return (
                  &lt;div className="field"&gt;
                      &lt;input type="text"
                             name={this.props.name}
                             className="form-control"
                             value={this.getValue()}
                             onChange={this.onChange} /&gt;
                      &lt;div className="input"&gt;{this.props.error}&lt;/div&gt;
                  &lt;/div&gt;
          );
      }
  });
  
  module.exports = MoneyInput;
  </code></pre>
  
  <p>That code displays the data correctly formatted, but every time I enter a value the cursor jumps to the end of the number.  </p>
  
  <p>I understand why that's happening (I think) and I've read several questions here related to not losing cursor position in JavaScript (<a href="https://stackoverflow.com/questions/14508707/updating-an-inputs-value-without-losing-cursor-position">here</a> and <a href="https://stackoverflow.com/questions/8219639/stop-cursor-from-jumping-to-end-of-input-field-in-javascript-replace">here</a> for example).</p>
  
  <p>My question is what's the best way to deal with this in React?  </p>
  
  <p>I think that ideally I wouldn't want to store the cursor position in state (e.g. I would want these to be <a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.pzelgqbzu" rel="noreferrer">Presentation Components in Dan Abramov syntax</a>) so is there another way?</p>