title: How to handle decimal values in React's onChange event for input?
body: <p>How do you handle decimals in child React input controls so that you can actually enter in for e.g. "0.01" successfully (without odd-to-the-end-user arrow navigation etc.)?</p>
  
  <p>Scenario:</p>
  
  <ol>
  <li>Have parent component that handles state for an object containing a decimal property.</li>
  <li>Child control is input control with value={this.props.whatever}.</li>
  <li>Input from client is a string, so the input's onChange/handleChange method must convert input to a decimal before this.props.onChange(value).</li>
  </ol>
  
  <p>For example:</p>
  
  <pre><code>handleChange: function(event) {
      var value = event.target.value;
      this.props.onChange(toDecimalOrWhateverFunction(value));
  },
  ...
  </code></pre>
  
  <p>Problem:</p>
  
  <p>Works fine for integers, but once you start entering in decimals, things go sideways with "." and "0" entries because the decimal conversion removes any decimal points and zeroes before you can add any following numbers (remember, onChange acts on every keystroke) and the input's value is set to the string representation of that number (no "." or "0") because of value={this.props.whatever} </p>
  
  <p>So, no problem with "123" or "1.14" since that string ends up being 123 and 1.14 respectively. But not able to do "0.01" or "1.01" because keeps firing off to 0 and 1 respectively before the decimal can be completed.</p>
  
  <p>Am I handling decimals in React JS <em>wrong</em> or is there a best practice for handling this scenario?</p>
  
  <p>UPDATE:
  The duplicate answer is not necessarily a distinct duplicate because in all my searching to solve my quandary, I didn't find it. However, its solution works for my scenario and can also be adapted for other scenarios where the actual data doesn't match the data type or format a user may view/enter. As per @WiredPrairie, "You'll need to store the string input and a decimal representation. The string will store the exact text the user has typed, and the other represents the decimal value".</p>