Correct way to have calculated values in React.js
<p><em>Setup</em></p>
<p>So basically I have 3 dimension fields (length, width and height) that are backed by state. I want to keep the state in inches but allow the user to switch the units on the display at will. Currently I'm only supporting inches and feet so I have a &quot;dimension_unit&quot; state that stores the currently displayed units and display_dimensions_multiplier that stores 1.0  for inches and 1.0/12.0 for feet (both are in state). I have everything working exactly as I want except for one thing.</p>
<p><em>Problem</em></p>
<p>All values I've tried have worked except when you try to use a decimal. Basically, in the background it's running throw the multiplier to get saved in state on change and then multiplies back in the value for the field which basically erases the trailing &quot;.&quot; as you type so say you were trying to type 4.5, what you would actually get in the field as you typed is 45. But if you type 45 and then move the cursor between the 4 and 5 add the . you'll end up with 4.5...</p>
<p><em>My idea</em></p>
<p>The way I was thinking about solving it was basically have a state variable for the display_length and then have the regular length state as well then have the display_length stay the same unless they change units and have the length calculated and stored on change and then just persist that... and the same for height and width... but that seems very un-react-ive so what is the react-ive way of doing this? Or is that it?</p>
<p>Happy to post example code if needed, but there is a good bit of code for any component so... yeah... hopefully just the explanation is enough.</p>
<h1>Edit1</h1>
<p>Basic before fiddle: <a href="https://jsfiddle.net/69z2wepo/37742/" rel="nofollow noreferrer">before</a></p>
<p>This is my idea I'm curious about: <a href="https://jsfiddle.net/94e9vaxa/4/" rel="nofollow noreferrer">after</a></p>
<p>The main difference being:</p>
<pre><code>_handleChange: function(ev){
  ev.stopPropagation()
  ev.preventDefault()
  var key = ev.target.name;
  var value = ev.target.value;
  var indims = this.state.input_dimensions;
  indims[key] = value;
  this.setState({input_dimensions: indims});
  value = (value / this.state.display_dimensions_multiplier);
  var dims = this.state.dimensions;
  dims[key] = value;
  this.setState({dimensions: dims});
},
</code></pre>