title: translating between cents and dollars in html input in React
body: <p>I'm in a bit of a weird situation, I am dealing with currency in my we app. On the model side, I am saving currency as cents before sending to the server as I don't want to deal with decimal points on the server side.
  In the view however, I want the to display normal currency and not cents.</p>
  <p>So, I have this input field where I take the data from dollars and change it to cents:</p>
  <pre><code>&lt;input name=&quot;balance&quot; type=&quot;number&quot; step=&quot;0.01&quot; min=&quot;0&quot;
      placeholder=&quot;Balance in cents&quot; onChange={this.handleUpdate}
      value={this.props.user.balance / 100} /&gt;
  </code></pre>
  <p>And when there's a change in the input value, I change it back to cents before sending it upstream:</p>
  <pre><code>handleUpdate: function(e) {
    
    var value = e.target.value;
    
    // changing it back from cents to dollars
    value = parseFloat(value) * 100;
    
    // save back to the parent component managing the prop
    this.props.onUserUpdate(value);
    
  }
  </code></pre>
  <p>This puts me in kind of a deadlock, there's no way for me to enter a decimal point &quot;.&quot; Let me demonstrate :</p>
  <ol>
  <li><p><code>33</code> in the input box --&gt; becomes <code>3300</code> in the parent state --&gt; goes back as <code>33</code> in component prop - <strong>all good</strong></p>
  </li>
  <li><p><code>33.3</code> in the input box --&gt; becomes <code>3330</code> in the parent state --&gt; goes back as <code>33.3</code> in the component prop - <strong>all good</strong></p>
  </li>
  <li><p><code>33.</code> in the input box --&gt; becomes <code>3300</code> in the parent state --&gt; goes back as <code>33</code> in the component prop - <strong>this is the problem</strong></p>
  </li>
  </ol>
  <p>As you can see in case #3, when the user first enters &quot;.&quot; this doesn't translate back to the same number with &quot;.&quot;</p>
  <p>Since it's a controlled input, there's basically no way of writing &quot;.&quot;</p>
  <p>I have tried using uncontrolled element with <code>defaultValue</code>, but the amount prop is not ready the time the component is rendered so it's just empty</p>
  <p><a href="http://jsfiddle.net/fpbhu1hs/" rel="nofollow noreferrer">http://jsfiddle.net/fpbhu1hs/</a></p>