In javascript react how to remove two symbols that end up together in a string but keep the last one like a calculator?

Question

Basically I am doing a FreeCodeCamp project and I am stuck one of the last points on the checklist. What we have been told to do is to make a calculator that has all the usual functions a clear button and decimal points. I have done all this but now, I have to stop the user from being able to type in extra operators for example if I press the keys "5", "x", "+", "5" the answer would be 10, i have done this but the problem is the calculator must support negative numbers so if you press "5", "x", "-" it identifies it as a minus number which means it adds in an invisible "_" that isn't seen on the display but makes the number a minus number in the showAnswer() function. So if you type "5", "x", "-" and then a "+" You get "5x+" this just ignores the + and turns the second number into a minus number and times them together so "5x+5" = -25. I want to get rid of the minus bit and also the "x" symbol so what I am trying to do is remove continuous symbols in a string. How can I do this? Also is there any ways I can improve my code?

Here is the Codepen project or here is the code:

const buttons = [
  {
    id: "divide",
    symbol: "÷"
  },
  {
    id: "multiply",
    symbol: "×"
  },
  {
    id: "add",
    symbol: "+"
  },
  {
    id: "subtract",
    symbol: "-"
  },
  {
    id: "zero",
    symbol: "0"
  },
  {
    id: "decimal",
    symbol: "."
  },
  {
    id: "one",
    symbol: "1"
  },
  {
    id: "two",
    symbol: "2"
  },
  {
    id: "three",
    symbol: "3"
  },
  {
    id: "four",
    symbol: "4"
  },
  {
    id: "five",
    symbol: "5"
  },
  {
    id: "six",
    symbol: "6"
  },
  {
    id: "seven",
    symbol: "7"
  },
  {
    id: "eight",
    symbol: "8"
  },
  {
    id: "nine",
    symbol: "9"
  },
  {
    id: "clear",
    symbol: "AC"
  },
  {
    id: "equals",
    symbol: "="
  }
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
      formula: "",
      lastClicked: 0,
      numberState: "positive"
    };
    this.handleClick = this.handleClick.bind(this);
    this.showAnswer = this.showAnswer.bind(this);
  }

  handleClick(button) {
    if (button == "AC") {
      this.state.formula = "0";
    } else if (button != "=") {
      if (this.state.formula == "0") {
        this.state.formula = "";
      }
      if (
        !this.state.formula
          .split(/[+×÷-]/)
          [this.state.formula.split(/[+×÷-]/).length - 1].split("")
          .includes(".")
      ) {
        if (
          !/[+×÷-]/.test(
            this.state.formula.charAt(this.state.formula.length - 1)
          ) ||
          !/[+×÷-]/.test(button)
        ) {
          this.state.formula = this.state.formula += button;
        } else if (button != "-") {
          this.state.formula = this.state.formula.slice(0, -1) + button;
        } else {
          this.state.formula = this.state.formula + "_" + button;
        }
      } else if (button != ".") {
        this.state.formula = this.state.formula += button;
      }
    } else {
      this.showAnswer();
    }
    document.getElementById("display").innerHTML = this.state.formula.replace(
      "_",
      ""
    );
  }
  showAnswer() {
    let formula = this.state.formula;
    let symbols = ["+", "×", "÷", "-"];
    let numbers = formula.split(/[+×÷-]/);
    for (let i = 0; i < numbers.length; i++) {
      if (numbers[i] == "_") {
        numbers[i + 1] = "-" + numbers[i + 1];
        numbers.splice(i, 1);
      }
    }
    let operands = formula.split("").filter((item) => symbols.includes(item));
    let answer = parseFloat(numbers[0]);
    for (let i = 0; i < numbers.length - 1; i++) {
      let index = i + 1;
      if (operands[i] == "+") {
        answer += parseFloat(numbers[index]);
      } else if (operands[i] == "-") {
        answer -= parseFloat(numbers[index]);
      } else if (operands[i] == "×") {
        answer *= parseFloat(numbers[index]);
      } else if (operands[i] == "÷") {
        answer /= parseFloat(numbers[index]);
      }
    }
    this.state.formula = answer.toString();
  }

  render() {
    return (
      <div id="calc">
        <div id="display"></div>
        <div id="buttons">
          {buttons.map(function (object) {
            return (
              <div
                onClick={() => this.handleClick(object.symbol)}
                id={object.id}
                class="buttons"
              >
                {object.symbol}
              </div>
            );
          }, this)}
        </div>
      </div>
    );
  }
}

const getAllIndexes = (arr, val) => {
  return arr.map((elm, idx) => (elm == val ? idx : "")).filter(String);
};

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

Any help is much appreciated

Answer 1

To remove continuous symbols you can add one more if block like -

    let operands = ["+","-","x","÷"];
    let length = this.state.formula.length;
    if (length > 1 && operands.indexOf(button) 
            && operands.indexOf(this.state.formula.charAt(length - 1))){
            //either alert user or consider the last symbol in expression as 
           // normal calculator
    }

Suggestion- You have added a property "lastClicked" in state but never updated it. If you update this property in handleclick API, more code will become simpler and readable.

Thanks