This is the starting point of my error:

What I'm trying to do is simply take that number and perform the mathematical operation of multiplication upon it- in this case multiplying it by 0.2- however- my program contains a heinous bug which- rather than performing that operation- simply appends 20 to the string in the text box, as you can see here:

This is the code I'm trying to use to apply the operative logic, to me it seems perfectly reasonable- though admittedly I'm not a world class expert in JavaScript, nor React. Is there something blatantly wrong with the following code snippet?

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

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

Perhaps that snippet is reasonable, and the flaw is elsewhere in my program- I'm really not even sure where to begin looking, the plete codebase can be found here, it's not really very voluminous- something on the order of- 10 files or so.

This is the starting point of my error:

What I'm trying to do is simply take that number and perform the mathematical operation of multiplication upon it- in this case multiplying it by 0.2- however- my program contains a heinous bug which- rather than performing that operation- simply appends 20 to the string in the text box, as you can see here:

This is the code I'm trying to use to apply the operative logic, to me it seems perfectly reasonable- though admittedly I'm not a world class expert in JavaScript, nor React. Is there something blatantly wrong with the following code snippet?

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

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

Perhaps that snippet is reasonable, and the flaw is elsewhere in my program- I'm really not even sure where to begin looking, the plete codebase can be found here, it's not really very voluminous- something on the order of- 10 files or so.

• javascript
• reactjs
• dom
• state

Share Improve this question Follow edited Oct 3, 2017 at 22:21 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Oct 3, 2017 at 21:40 smatthewenglishsmatthewenglish 2,89944 gold badges3838 silver badges7373 bronze badges 6

• Try let newEquation = Number(equation) + (Number(equation) * 0.20); I am suspecting that equation is a string and not of type number. If that works I can explain it better as an answer! – kyle Commented Oct 3, 2017 at 21:48
• tried that- didn't werk – smatthewenglish Commented Oct 3, 2017 at 21:50
• What is the value of newEquation after my codes executes? You can check it just by console.log(newEquation);. If you can provide it in a jsbin that would be extremely helpful. – kyle Commented Oct 3, 2017 at 21:52
• for some reason it works for 0.20 but none of the others :/ – smatthewenglish Commented Oct 3, 2017 at 21:53
• Check my answer, it should help! – kyle Commented Oct 3, 2017 at 22:08

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 2

When you pull the value from this.state.equation it returns a string. You will want to convert it to a number to be able to perform math operations on it. In javascript to concatenate strings the + operator is used, so it treats your equation as a string concat. To easily fix this, convert the value of the equation in the state to a number when you handle the initial assignment. let equation = Number(this.state.equation). Here is a your full code:

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

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

I'd also like to make the remendation to refactor it to the following:

addLogicToEquation(newLogic) {
  let equation = Number(this.state.equation);
  let newEquation = equation;

  if (newLogic.includes("%")) {
    const percent = Number(newLogic.replace('%', '')) / 100;
    newEquation += (equation * percent);
  } else {
    newEquation += newLogic;
  }

  this.setState({ equation: newEquation });
}

This will allow for you to easily modify any of the percentages without having to go in an make a bunch of changes. It will be much more maintainable.

I'm assuming newLogic here contains the string "20".

In JavaScript, if you add a number to a string, both parts will be converted to a string and concatenated:

var out = 100 + "20"; // "10020"

To force an addition instead, explicitly convert the string to a number, e.g. using the + prefix:

var out = 100 + +"20"; // 120

You need to cast your string to a float before the operation:

const string = "100";
const casted = parseFloat(string);
const output = casted + (casted * 0.15);

Of course you can just use 1.15 instead and avoid the addition

const output = parseFloat("100") * 1.15;