Ограничение количества входов

result всегда будет содержать только одну цифру. Вы хотите добавить новую цифру к существующему значению и только потом заменить:

this.setState(prevState => ({ value: (prevState.value + result).replace("00", "0") }));

Однако этот код содержит ошибки, потому что вы никогда не сможете ввести 100, он всегда будет изменен на 10.

Итак, правильная логика - добавить начальный якорь:

this.setState(prevState => ({ value: (prevState.value + result).replace(/^00/, "0") }));

Обновлено:

Чтобы достичь своей фактической цели, вы можете использовать что-то вроде следующего (не самый чистый код, но он должен донести мою мысль):

import React from "react";

const availableButtons = [
  "0",
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  ".",
  " = ",
  "clear"
];
const operators = ["+", "-", "*", "/"];

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = { values: [], value: "", currentNumber: "" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(value) {
    if (value === "clear") {
      this.setState({ values: [], value: "", currentNumber: "" });
    } else if (value === " = ") {
      this.setState({
        value: eval(this.state.value),
        values: [],
        currentNumber: ""
      });
    } else {
      if (operators.indexOf(value) !== -1) {
        this.setState(prevState => ({
          values: [...prevState.values, prevState.currentNumber, value],
          currentNumber: "",
          value: prevState.value + value
        }));
      } else {
        this.setState(prevState => {
          const currentNumber = this.formattedNumber(
            prevState.currentNumber,
            value
          );
          const newValue = prevState.values.join("") + currentNumber;
          return {
            currentNumber,
            value: newValue
          };
        });
      }
    }
  }

  formattedNumber(previousNumber, newSymbol) {
    if (!previousNumber && previousNumber !== 0) return newSymbol;
    if (
      previousNumber.length === 1 &&
      previousNumber === "0" &&
      newSymbol !== "."
    ) {
      return newSymbol;
    } else {
      return previousNumber + newSymbol;
    }
  }

  render() {
    return (
      <div id = "container">
        {this.state.value}
        <br />
        {availableButtons.concat(operators).map(x => (
          <button onClick = {() => this.handleClick(x)} key = {x}>
            {x}
          </button>
        ))}
      </div>
    );
  }
}
export default Calculator;

Рабочий образец

Вы можете изменить эту строку

this.setState({ value: this.state.value + result.replace("00", "0") });

к этому

let num = this.state.value + Number(result);
this.setState({ value: Number(num).toString()});

Думаю, это решит.

Несколько указателей ...

• Если вы хотите, чтобы value был строкой, убедитесь, что вы нигде не изменили ее на число. Вы делаете это, когда id === 'clear'
• Если вы хотите проверить только "00" в начале value, используйте startsWith, а не includes.
• Если вы используете setState и новое состояние зависит от предыдущего состояния, вы должны сначала получить доступ к предыдущему значению состояния. обоснование для этого находится в документации.

@ daniel-hilgarth предоставляет правильный способ использования setState в этом случае.

Удалить ведущий ноль:

this.setState(prevState => ({
  value: `${prevState.value}${result}`.replace(/^0+\B/, "")
}));

Есть много способов сделать это. Регулярное выражение выше идентифицирует ведущие нули. В случае, когда у вас есть только "0", он вообще не совпадает, потому что "0", за которым следует конец строки (или граница), не соответствует регулярному выражению, которое является "0", за которым следует «не граница слова».