Michael Michael - 4 months ago 19
Javascript Question

translating between cents and dollars in html input in React

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.

So, I have this input field where I take the data from dollars and change it to cents:

<input name="balance" type="number" step="0.01" min="0" placeholder="Balance in cents" onChange={this.handleUpdate} value={this.props.user.balance / 100)} />


And when there's a change in the input value, I change it back to cents before sending it upstream:

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);

}


This puts me in kind of a deadlock, there's no way for me to enter a decimal point "." Let me demonstrate :


  1. 33
    in the input box --> becomes
    3300
    in the parent state --> goes back as
    33
    in component prop - all good

  2. 33.3
    in the input box --> becomes
    3330
    in the parent state --> goes back as
    33.3
    in the component prop - all good

  3. 33.
    in the input box --> becomes
    3300
    in the parent state --> goes back as
    33
    in the component prop - this is the problem



As you can see in case #3, when the user first enters "." this doesn't translate back to the same number with "."

Since it's a controlled input, there's basically no way of writing "."

I have tried using uncontrolled element with
defaultValue
, but the amount prop is not ready the time the component is rendered so it's just empty

http://jsfiddle.net/fpbhu1hs/

Answer

Controlled inputs using derived values can be tricksy - if you need to be able to display invalid or otherwise weird input then...

  1. always hold the input's value in its component's own state

    <input value={this.state.value} onChange={this.handleUpdate} // rest as above...
    
  2. derive the initial value in getInitialState()

    getInitialState: function() {
      return {value: this.props.user.balance / 100}
    }
    
  3. implement componentWillReceiveProps(nextProps) to detect when the prop's value is changing from above and re-derive the state value

    componentWillReceiveProps: function(nextProps) {
      if (this.props.user.balance != nextProps.user.balance) {
        this.setState({value: nextProps.user.balance / 100})
      }
    }
    

Now when the user enters "33.", you store their literal input using setState(), then call back to the parent.

handleUpdate: function(e) {
  var value = e.target.value
  this.setState({value: value})
  this.props.onUserUpdate(parseFloat(value) * 100)
}

If the value the parent then passes back down to the child via props hasn't changed (3300 == 3300 in this case), then componentWillReceiveProps() won't do anything.

Working snippet:

<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<div id="example"></div>
<script type="text/jsx;harmony=true">void function() { 'use strict';

var Parent = React.createClass({
  getInitialState() {
    return {cents: 3300}
  },
  
  _changeValue() {
    this.setState({cents: Math.round(Math.random() * 2000 + Math.random() * 2000)})
  },

  _onCentsChange(cents) {
    this.setState({cents})
  },

  render() {
    return <div>
      <p><strong>Cents:</strong> {this.state.cents.toFixed(0)} <input type="button" onClick={this._changeValue} value="Change"/></p>
      <Child cents={this.state.cents} onCentsChange={this._onCentsChange}/>
    </div>
  }
})

var Child = React.createClass({
  getInitialState() {
    return {dollars: this.props.cents / 100}
  },

  componentWillReceiveProps(nextProps) {
    if (this.props.cents != nextProps.cents) {
      this.setState({dollars: nextProps.cents / 100})
    }
  },

  _onChange(e) {
    var dollars = e.target.value
    this.setState({dollars})
    if (!isNaN(parseFloat(dollars)) && isFinite(dollars)) {
      this.props.onCentsChange(parseFloat(dollars) * 100)
    }
  },

  render() {
    return <div>
      <input type="number" step="0.01" min="0" value={this.state.dollars} onChange={this._onChange}/>
    </div>
  }
})

React.render(<Parent/>, document.querySelector('#example'))

}()</script>

Comments