JavaScript Calculator React

Can someone help me with how to remove the leading zero in my js calculator code. I have tried a number of ways such a parseFloat on the currentOperand but then the code will not accept further zeros within the numberstring.
Also I am battling with which code I should use for changing the state variables.
What I am trying to do is build up a number string for the currentOperand with no leading zeros unless it is of the form 0.12 etc and then put it into the formula string when I select an operator and then add the second operand etc.
Am I using the right way to update the state?
Are conditionals using the number string which I am using ok .

JS Calculator React

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentOperand: "0",
      previousOperand: "",
      formula: "",
      evaluated: false,
    };
    this.handleNumber = this.handleNumber.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleDecimal = this.handleDecimal.bind(this);
  }

  handleNumber(e) {
    const value = e.target.innerText;
        // prevent more than one leading zero           
        if(value === '0' && this.state.currentOperand === '0') {          
          return this.state;
        }
        if (value >= '0' && value <= '9') {          
          this.setState((state) => {
            return { currentOperand: state.currentOperand + value }
            
          });       
        }        
  }

  handleDecimal(e) {
    const value = e.target.innerText;
    // stops more than one decimal point being added
     if(value === '.' && this.state.currentOperand.includes('.')) {
       return this.state;
    }
    if( value === '.'){ 
      this.setState((state) => {
          return {currentOperand: state.currentOperand + value }
      });
    }     
  }  

  handleClear = ()=> {
    this.setState({      
      currentOperand: '0',
      previousOperand: '',
      formula: '',
      evaluated: false,
     });  
  }

  render() {
    return (
      <div className="calculator-grid">
        <div className="output">
          <div className="prev-operand" id="formula">
            { this.state.formula }
            </div>
          <div className="curr-operand" id="display">
            {this.state.currentOperand}
          </div>
        </div>
        <button className="clear" id="clear"  onClick={this.handleClear}>AC</button>
        <button id="delete" className="btn">DEL</button>
        <button id="divide" className="btn">รท</button>
        <button id="seven" className="btn" onClick={this.handleNumber}>7</button>
        <button id="eight" className="btn" onClick={this.handleNumber}>8</button>
        <button id="nine" className="btn" onClick={this.handleNumber}>9</button>
        <button id="multiply" className="btn">*</button>
        <button id="four" className="btn" onClick={this.handleNumber}>4</button>
        <button id="five" className="btn" onClick={this.handleNumber}>5</button>
        <button id="six" className="btn" onClick={this.handleNumber}>6</button>
        <button id="subtract" className="btn">-</button>
        <button id="one" className="btn" onClick={this.handleNumber}>1</button>
        <button id="two" className="btn" onClick={this.handleNumber}>2</button>
        <button id="three" className="btn" onClick={this.handleNumber}>3</button>
        <button id="add" className="btn">+</button>
        <button id="zero" className="btn" onClick={this.handleNumber}>0</button>
        <button id="decimal" className="btn"  onClick={this.handleDecimal}>.</button>
        <button id="equals" className="equals">=</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

1 Like

Appears to me you are updating your state correctly. As far as how to prevent a leading zero, in handleNumber when a number not 0 is pressed, if your currentOperand is โ€œ0โ€ then instead of appending the number, just assign the number.

thank you for the help. I fixed that problem. That was the first of many problems I had with coding this project. The biggest challenge was getting step 13 to work. Spent many hours with that and other problems but finally the code passes all of the tests. I looked at many Youtube videos solutions but none that I saw would pass all of the fcc tests or seemed to consider them all.
I got a lot of insight on how to solve the various issues by using the react browser tool which enabled me to watch how the state variables changed when entering operators or numbers

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.