Decimal point how to solve this issue correctly

Hello
I’m working on my Calculator project
CalculatorFCC codeSandbox

Now I’m trying to solve the multiple decimal point problem.
here is part of my App component code (whole component bellow)
App component
in handleBtn I’m trying to solve multiple operators issue and multiple decimal dot
with multiple operator it working fine
but for decimal point not
I try to use regExpresion: let checkerDecimal = /\d+\.\d+\./g;
And it’s absolute :-1: :frowning:
Does it my stupid solution and may here is more clever solution for that issue?

  handleBtn = event => {
    let checkerDecimal = /\d+\.\d+/g;
    console.log(checkerDecimal.test(this.state.result));
    if (
      (isNaN(event) &&
        isNaN(this.state.result[this.state.result.length - 1])) ||
      checkerDecimal.test(this.state.result)
    ) {
      this.setState({
        result: this.state.result
      });
    } else {
      this.setState({
        result: this.state.result + event
      });
    }
  };

the whole App component code

import React from "react";

import Button from "./Button";
import Display from "./Display";
import "../style/App.scss";
import * as math from "mathjs";

class App extends React.Component {
  state = {
    result: ""
  };

  handleBtn = event => {
    let checkerDecimal = /\d+\.\d+/g;
    console.log(checkerDecimal.test(this.state.result));
    if (
      (isNaN(event) &&
        isNaN(this.state.result[this.state.result.length - 1])) ||
      checkerDecimal.test(this.state.result)
    ) {
      this.setState({
        result: this.state.result
      });
    } else {
      this.setState({
        result: this.state.result + event
      });
    }
  };

  handleClear = event => {
   this.setState({
      result: ""
    });
  };

  handleEqual = () => {
    this.setState({
      result: math.eval(this.state.result)
    });
  };

  render() {
    return (
      <div className="App">
        <div className="container">
          <Display result={this.state.result} id="display" />

          <div className="btn" onClick={this.handleClear} id="clear">
            <h3>AC</h3>
          </div>
          <Button handleClick={this.handleBtn} id="divide">
            /
          </Button>
          <Button handleClick={this.handleBtn} id="multiply">
            *
          </Button>

          <Button handleClick={this.handleBtn} id="seven">
            7
          </Button>
          <Button handleClick={this.handleBtn} id="eight">
            8
          </Button>
          <Button handleClick={this.handleBtn} id="nine">
            9
          </Button>
          <Button handleClick={this.handleBtn} id="subtract">
            -
          </Button>

          <Button handleClick={this.handleBtn} id="four">
            4
          </Button>
          <Button handleClick={this.handleBtn} id="five">
            5
          </Button>
          <Button handleClick={this.handleBtn} id="six">
            6
          </Button>
          <Button handleClick={this.handleBtn} id="add">
            +
          </Button>

          <Button handleClick={this.handleBtn} id="one">
            1
          </Button>
          <Button handleClick={this.handleBtn} id="two">
            2
          </Button>
          <Button handleClick={this.handleBtn} id="three">
            3
          </Button>
          <Button handleClick={() => this.handleEqual()} id="equal">
            =
          </Button>

          <Button handleClick={this.handleBtn} id="zero">
            0
          </Button>
          <Button handleClick={this.handleBtn} id="decimal">
            .
          </Button>
        </div>
      </div>
    );
  }
}

export default App;