Having Decimal Problems With My Calculator

JavaScript
1

Hi everyone.
My decimal only appends to one value, after the operator it no longer appends to any value. I’ve been stuck here for two weeks, I’ll really appreciate any contribution.

here is my code.

class Result extends React.Component {
  render(){
    let {result} = this.props;
    return(
    <div className="result" id="display">
        <p>{result}</p>
     </div>
    
    )
  }
}

class KeyPad extends React.Component {
  
  
  render(){
    return(
    <div className="button">
        <button  name="(" onClick={ e => this.props.onClick(e.target.name)}> (
        </button>
         <button name="AC" onClick={ e => this.props.onClick(e.target.name)} id="clear"> AC
        </button>
         <button name=")" onClick={ e => this.props.onClick(e.target.name)}> )
        </button>
         <button name="DEL" onClick={ e => this.props.onClick(e.target.name)}> DEL
        </button> <br />
        
        
         <button name="7" onClick={ e => this.props.onClick(e.target.name)} id="seven"> 7
        </button>
         <button name="8" onClick={ e => this.props.onClick(e.target.name)} id="eight"> 8
        </button>
         <button name="9" onClick={ e => this.props.onClick(e.target.name)} id="nine"> 9
        </button>
         <button name="/" onClick={ e => this.props.onClick(e.target.name)} id="divide"> /
        </button> <br/>
        
         <button name="4" onClick={ e => this.props.onClick(e.target.name)} id="four"> 4
        </button>
         <button name="5" onClick={ e => this.props.onClick(e.target.name)} id="five"> 5
        </button>
         <button name="6" onClick={ e => this.props.onClick(e.target.name)} id="six"> 6
        </button>
         <button name="*" onClick={ e => this.props.onClick(e.target.name)} id="multiply"> *
        </button><br/>
        
         <button name="1" onClick={ e => this.props.onClick(e.target.name)} id="one"> 1
        </button>
         <button name="2" onClick={ e => this.props.onClick(e.target.name)} id="two"> 2
        </button>
         <button name="3" onClick={ e => this.props.onClick(e.target.name)} id="three"> 3
        </button>
         <button name="+" onClick={ e => this.props.onClick(e.target.name)} id="add"> +
        </button><br />
        
         <button name="." onClick={ e => this.props.onClick(e.target.name)} id="decimal"> .
        </button>
         <button name="0" onClick={ e => this.props.onClick(e.target.name)} id="zero"> 0
        </button>
         <button name="=" onClick={ e => this.props.onClick(e.target.name)} id="equals"> =
        </button>
         <button name="-" onClick={ e => this.props.onClick(e.target.name)} id="subtract"> -
        </button>
    </div>
    )
  }
}

class App extends React.Component {
  constructor (props){
    super(props);
    this.state = {
      result: ""
    }
    this.onClick = this.onClick.bind(this);
    this.calculate = this.calculate.bind(this);
    this.reset = this.reset.bind(this);
    this.backSpace = this.backSpace.bind(this);
    this.decimal = this.decimal.bind(this)
  }
  
  componentDidMount(){
    this.setState({
      result: 0
    })
  }
  
  onClick = button => {

    if (button === "=") {
      this.calculate();
    } else if (button === "AC"){
      this.reset();
    } else if (button === "DEL"){
      this.backSpace();
    } 
    
    else if (this.state.result === 0){
      if (button === "0") {
        this.setState({
          result: 0
        })
      } else {
      this.setState({
        result: button
      })
      }
    } else if (button === "."){
      this.decimal()
    }
    
    else {
      this.setState({
        result: this.state.result + button
      })
    }
  }
  
    calculate = () => {
      try {
        if (this.state.result){
        this.setState({
          result: (eval(this.state.result) || 0) 
        });
        } 
        
      } catch (e) {
        this.setState({
          result: "error"
        });
      }
    }
    
    reset = () => {
      this.setState({
        result: 0
      });
    }
    
    backSpace = () => {
      this.setState({
        result: this.state.result.slice(0,-1)
      })
    }
   decimal = () => {
  
     if (this.state.result.indexOf(".") <= -1){
       this.setState({
         result: this.state.result += "."
       })
     } else{
        this.setState({
        result: this.state.result + button
      })
     }
   }
  
  render(){
    return(
      <div className="container text-center">
        <div className = "calculator">
        <Result result={this.state.result} decimal={this.state.decimal} />
        <KeyPad onClick={this.onClick} />
        </div>
      </div>
    
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"));
2

here is my pen
https://codepen.io/OpeKareem/pen/xxOaEbZ

3

i feel here is where the problem is, i just can’t figure a way out from this block.

4 
  decimal = () => {
    if (this.state.result.includes(".") <= -1) {
      this.setState((state) => ({
        result: state.result + "."
      }));
    } else {
      this.setState((state) => ({
        result: state.result + button
      }));
    }
  };

This still won’t work, because button isn’t defined so it blows up as soon as you try to add a decimal, but it removes you mutating the state – this.state.result += "." doesn’t make sense, you should just be concatenating “.” ie this.state.result + "." , not saying result should be the result of mutating result

5

Thank you Dan. ```button’’’ was unnecessary ,that was a mistake.

1 Like
6

I already found a solution. So all i did was

decimal = () => {
    const splitted = this.state.result.split(/[\+\*\-\/]/);
    const last = splitted.splice(-1)[0]
    if (!last.includes(".")){
          this.setState({
            result: this.state.result + "."
          });
        }
   }