Unable to set text box value in React

Question

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      amount:1000000
    }
   }
  handleChange= (e)=> {
    const number= Number(e.target.value).toLocaleString();
    console.log(number);
    this.setState({
      amount: number
    })
  }
  render() {
    return (
      <div>
       <input onChange={this.handleChange} value={this.state.amount.toLocaleString()}/>
      </div>
    )
  }
}

ReactDOM.render(<Todo />, document.getElementById('root'));

I am a new front end developer. I am unable to change the value of my textbox with more than 9,999. I get NaN

https://codesandbox.io/s/y2lrywpk21

Your code sandbox doesn't appear to match your question.

Brian Thompson
– Brian Thompson

2020-03-24 20:48:10 +00:00
Commented Mar 24, 2020 at 20:48 — Brian Thompson
– Brian Thompson, Commented Mar 24, 2020 at 20:48

Brian Thompson · Accepted Answer · 2020-03-24 20:51:53Z

1

The problem is once you get into the thousands, you introduce commas. The comma is causing an issue when you try to convert it to a number. Use this to strip the commas: .replace(/,/g, '').

You should also only use .toLocalString when displaying the value. There's no need to use it when setting state and when reading state.

Working example:

class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      amount:1000000
    }
   }
  handleChange= (e)=> {
    const number= Number(e.target.value.replace(/,/g, ''));
    console.log(number);
    this.setState({
      amount: number
    })
  }
  render() {
    return (
      <div>
       <input onChange={this.handleChange} value={this.state.amount.toLocaleString()}/>
      </div>
    )
  }
}

ReactDOM.render(<Todo />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

answered Mar 24, 2020 at 20:51

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aditya Shukla Over a year ago

Thank You for explaining me the issue. Works now

Nick Kinlen · Accepted Answer · 2020-03-24 20:50:17Z

0

Why are you using toLocaleString?

toLocaleString is used to translate a number into language specific formats i.e. using commas when dealing with US English or using decimals when dealing with German language and other European languages. 3,000 vs 3.000 for example.

Check out the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

I think you’re misusing toLocaleString. Also, check out the disclaimer at the bottom of the docs pertaining to using this function with large numbers.

answered Mar 24, 2020 at 20:50

Nick Kinlen

1,4145 gold badges35 silver badges62 bronze badges

Collectives™ on Stack Overflow

Unable to set text box value in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related