Format JavaScript input numbers as float with two decimal places, and enforce on all operations

Question

Here is a prototypical view from the app I'm building:

The thing is, that says 100, as you would for an int- but I'd like it to say 100.00, because it's meant to represent money $- so it should always end in two decimal places. That means- essentially the representation that I'm trying to create is a float with two trailing decimal places.

So, this app itself is built in React, and the state, is created and persisted as follows, this is essentially the most important file of my program, it's called App.js:

import React, { Component } from 'react';
import ButtonNumberContainer from './ButtonNumberContainer.js'
import ButtonEquationContainer from './ButtonEquationContainer.js'
import Result from './Result'
import './App.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
      equation: "",
    }

    this.addLogicToEquation = this.addLogicToEquation.bind(this)
    this.evalEquation = this.evalEquation.bind(this)
  }

  addLogicToEquation(newLogic) {
    let equation = this.state.equation

    if(newLogic==="10%"){
      let newEquation = Number(equation) + (Number(equation) * 0.10)
      console.log(newEquation)
      this.setState({equation: newEquation})
    }else if (newLogic==="15%"){
      let newEquation = Number(equation) + (Number(equation) * 0.15)
      console.log(newEquation)
      this.setState({equation: newEquation})
    }else if (newLogic==="20%"){
      let newEquation = Number(equation) + (Number(equation) * 0.20)
      console.log(newEquation)
      this.setState({equation: newEquation})
    }
    else{
      // we're adding more numbers
      let newEquation = equation + newLogic
      this.setState({equation: newEquation})
    }
  }

  evalEquation() {
    let str = this.state.equation.toString()
    console.log('str: ', str)

    palindrome(str)

    function palindrome(str) {
      let re = /[\W_]/g;
      let lowRegStr = str.toLowerCase().replace(re, '')
      let reverseStr = lowRegStr.split('').reverse().join('') 
      if(reverseStr === lowRegStr) {
        console.log("YES")
        console.log("str: ", str)
      } else {
        console.log("NOT")
        console.log("str: ", str)
      }
    }
  }

  render() {
    return (
      <div className="App">
        <Result text={this.state.equation}/>
        <ButtonNumberContainer addLogicToEquation={this.addLogicToEquation}/>
        <ButtonEquationContainer addLogicToEquation={this.addLogicToEquation}
                                 evalEquation={this.evalEquation}/>
      </div>
    );
  }
}

export default App;

This is also kind of an important part of the code- maybe we need to consider this as well:

import React, { Component, PropTypes } from 'react';

export default class ButtonNumber extends Component {
  render() {
    const { number, addLogicToEquation, evalEquation } = this.props
    const numberClass = " btn btn-number-" + number

    return (
      <button className={numberClass} onClick={() => {addLogicToEquation(number)}}>
        {number}
      </button>
    )
  }
}

If there's something you need to check for reference in the codebase you can find it here on my GitHub page.

UPDATE:

addLogicToEquation(newLogic) {
  let equation = Number(this.state.equation).toFixed(2)

  if(newLogic==="10%"){
    let newEquation = Number(equation) + (Number(equation) * 0.10)
    console.log(newEquation)
    this.setState({equation: Number(newEquation).toFixed(2)})
  }else if (newLogic==="15%"){
    let newEquation = Number(equation) + (Number(equation) * 0.15)
    console.log(newEquation)
    this.setState({equation: Number(newEquation).toFixed(2)})
  }else if (newLogic==="20%"){
    let newEquation = Number(equation) + (Number(equation) * 0.20)
    console.log(newEquation)
    this.setState({equation: Number(newEquation).toFixed(2)})
  }
  else{
    // we're adding more numbers
    let newEquation = equation + Number(newLogic).toFixed(2)
    this.setState({equation: Number(newEquation).toFixed(2)})
  }

}

Now I end up with the following error:

score 6 · Accepted Answer · edited Oct 03 '17 at 23:48

6

You can use number.toFixed(2) to output 100.00 instead of 100.

edited Oct 03 '17 at 23:48

Nisse Engström

4,738
23
27
42

answered Oct 03 '17 at 23:22

Alexander Elgin

6,796
4
40
50

I think maybe I should use this thing: https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-dollars-currency-string-in-javascript – smatthewenglish Oct 03 '17 at 23:23
man- I tried in the way you suggested- but I ended up with an error- I've posted the changed code in the OP as an update, along with the error- could you maybe take a look at it and let me know what you think might be the problem? – smatthewenglish Oct 03 '17 at 23:30
you might be looking for `parseFloat(number)` to do the math, then `toFixed` for the output. – Andrew Oct 03 '17 at 23:35
this really messed with my type conversion I think- now I'm in kind of a mess- as you can see here: https://stackoverflow.com/questions/46555065/increment-float-in-react-string-conversion-state-representation – smatthewenglish Oct 03 '17 at 23:52

Format JavaScript input numbers as float with two decimal places, and enforce on all operations

1 Answers1