React onChange is swallowing my decimal when using parseFloat

Question

I have a simple onChange which takes the user's input pareses it and sets the state to render. Here is the code.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      random: {
        foo: 0
      }
    }
  }

  onChange(e) {
    let random = this.state.random;
    random[e.target.name] = parseFloat(e.target.value);
    this.setState({random});
  }

  render() {
    return (
      <div className="App">
        <input onChange={this.onChange.bind(this)} type="text" name="foo" value={this.state.random.foo} />
      </div>
    );
  }
}

export default App;

What I don't understand is where my decimal is going. I know there is no validation in place to stop the user from entering letters, but this is just a sample app to test this issue I ran into. When I enter a decimal point in does not get rendered. Where am I going wrong?

ok just tried and got this. When I had just 1. I saw 1. in the console but not on the screen. When I wrote 1.2 I saw 12 in the console and the screen. — Chaim Friedman, Mar 02 '17 at 15:17
Possible duplicate of [translating between cents and dollars in html input in React](http://stackoverflow.com/questions/28072727/translating-between-cents-and-dollars-in-html-input-in-react) — cn007b, Mar 02 '17 at 15:40

Blake Plumb · Accepted Answer · 2017-03-02T15:48:27.347

9

The problem is that React's onChange doesn't behave like the browser's onChange It behaves like onInput So it is getting called every time you type a value. This results in your parseFloat actually parsing 1. instead of 1.2 and the parsed value of 1. is 1

edited Mar 02 '17 at 15:48

answered Mar 02 '17 at 15:40

Blake Plumb

6,779
3
33
54

score 2 · Answer 2 · answered Mar 03 '17 at 01:19

As other have said, the problem is that the number type doesn't hold enough information about the state of the input, so when 1. makes a round trip it loses the ..

In other words, an input is a widget for editing a string, and your state doesn't contain enough information to recreate that string correctly, and instead the decimal point gets lost.

Thus, one solution is to store it as a string in your state, perhaps called inputValue. Then, using unidirectional data flow, manage the translation between that string and the parts of code that think of it numerically very explicitly. Converting from a string to a number is dangerous -- not every string represents a number, so that part of the code needs to deal with validation (and not lose track of the text input). And converting from a number to a string is risky, as you've already observed, so it should only be done when there is a good reason (for instance, the server is pushing an event that the data changed somewhere else, swap it out).

Armin · Answer 3 · 2017-03-03T04:25:26.483

1

The onChange event happens anytime you hit a key, which causes the function to run and parseFloat takes away . from your number, and that's why you end up having 12 instead of 1.2, so before using parseFloat you need to check whether the last character is . and add it back afterwards.

edited Mar 03 '17 at 04:25

answered Mar 02 '17 at 15:19

Armin

220
2
10

[`parseFloat`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) doesn't take a base parameter. – Fabian Klötzl Mar 02 '17 at 15:24
This is how it's done in React. Google React controlled component – nafg Mar 02 '17 at 17:02
@Armin if you fix your answer I could take off my downvote – nafg Mar 03 '17 at 01:20
@nafg Done, how does it look? – Armin Mar 03 '17 at 04:25

score 0 · Answer 4 · answered Mar 02 '17 at 15:44

Change your default state to foo: 1.11 - you will be able to edit this value (It isn't solution it is clue).

The problem here is parseFloat which is trims dot from end of string when you typing new float value, and return for your string parseFloat('0.') value 0, hence you see your behavior...

React onChange is swallowing my decimal when using parseFloat

4 Answers4

Linked