problem.js

class App extends React.Component {
  state = {
    buttons: [
      { label: "AC", value: "ac", id: "clear", type: "reset" },
      { label: "CE", value: "ce", id: "ce", type: "cancel" },
      { label: "%", value: "%", id: "percentage", type: "percent" },
      { label: "÷", value: "/", id: "divide", type: "action" },
      { label: "7", value: "7", id: "seven", type: "number" },
      { label: "8", value: "8", id: "eight", type: "number" },
      { label: "9", value: "9", id: "nine", type: "number" },
      { label: "x", value: "*", id: "multiply", type: "action" },
      { label: "4", value: "4", id: "four", type: "number" },
      { label: "5", value: "5", id: "five", type: "number" },
      { label: "6", value: "6", id: "six", type: "number" },
      { label: "-", value: "-", id: "subtract", type: "action" },
      { label: "1", value: "1", id: "one", type: "number" },
      { label: "2", value: "2", id: "two", type: "number" },
      { label: "3", value: "3", id: "three", type: "number" },
      { label: "+", value: "+", id: "add", type: "action" },
      { label: "0", value: "0", id: "zero", type: "number" },
      { label: ".", value: ".", id: "decimal", type: "number" },
      { label: "=", value: "=", id: "equals", type: "display" }
    ],
    result: {
      total: undefined,
      action: undefined,
      currentValue: undefined,
      error: ""
    }
  };

  filterValidNumber = value => {
    if (/^(-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/.test(value))
      return Number(value);
    return NaN;
  };

  updateResult = entry => {
    if (typeof entry.total !== "undefined") {
      entry.total = this.filterValidNumber(parseFloat(entry.total).toFixed(4));
    }

    if (entry.total === "Infinity") {
      entry.total = undefined;
      entry.currentValue = undefined;
      entry.action = undefined;
      entry.error = "Cannot divide by zero";
    } else if (entry.total > 9999999999 || entry.total < -9999999999) {
      entry.total = undefined;
      entry.currentValue = undefined;
      entry.action = undefined;
      entry.error = "Maximum Limit Reached";
    } else {
      entry.error = "";
    }

    this.setState({ result: entry });
  };

  render() {
    return (
      <div id="container">
        <Display result={this.state.result} />
        <div id="buttons">
          {this.state.buttons.map((btn, index) => (
            <ButtonKeys
              key={index}
              label={btn.label}
              value={btn.value}
              id={btn.id}
              type={btn.type}
              result={this.state.result}
              updateResult={this.updateResult}
            />
          ))}
        </div>
      </div>
    );
  }
}

class ButtonKeys extends React.Component {
  handleBtn = e => {
    let { total, action, currentValue } = this.props.result;
    const eventType = this.props.type;
    const eventValue = e.target.value;

    if (
      typeof total !== "undefined" &&
      typeof action === "undefined" &&
      typeof currentValue === "undefined" &&
      eventType === "number"
    ) {
      total = undefined;
      currentValue = undefined;
      if (eventValue === ".") {
        currentValue = "0.";
      } else {
        currentValue = eventValue;
      }
    } else if (
      total &&
      action &&
      (typeof currentValue === "undefined" ||
        typeof currentValue !== "undefined") &&
      eventType === "number"
    ) {
      if (typeof currentValue !== "undefined") {
        let tmpNumber = currentValue.toString();
        if (tmpNumber.length >= 10) {
          return;
        }
        if (tmpNumber.includes(".") && eventValue === ".") {
          return;
        } else {
          tmpNumber = tmpNumber + eventValue;
        }
        currentValue = tmpNumber;
      } else if (typeof currentValue === "undefined") {
        if (eventValue === ".") {
          currentValue = "0.";
        } else {
          currentValue = eventValue;
        }
      }
    } else if (
      total &&
      action &&
      (typeof currentValue === "undefined" ||
        typeof currentValue !== "undefined") &&
      eventType === "action"
    ) {
      if (typeof currentValue !== "undefined") {
        total =
          action === "+"
            ? parseFloat(total) + parseFloat(currentValue)
            : action === "-"
              ? parseFloat(total) - parseFloat(currentValue)
              : action === "*"
                ? parseFloat(total) * parseFloat(currentValue)
                : parseFloat(total) / parseFloat(currentValue);
        currentValue = undefined;
      } else {
        action = eventValue;
      }
    } else if (
      total &&
      action &&
      (typeof currentValue === "undefined" ||
        typeof currentValue !== "undefined") &&
      eventType === "display"
    ) {
      total = parseFloat(total);
      currentValue =
        typeof currentValue === "undefined" ? total : parseFloat(currentValue);

      total =
        action === "+"
          ? total + parseFloat(currentValue)
          : action === "-"
            ? total - parseFloat(currentValue)
            : action === "*"
              ? total * parseFloat(currentValue)
              : total / parseFloat(currentValue);
      action = undefined;
      currentValue = undefined;
    } else if (
      total &&
      typeof currentValue === "undefined" &&
      eventType === "action"
    ) {
      action = eventValue;
      currentValue = undefined;
    } else if (!total && !action && !currentValue && eventType === "number") {
      if (eventValue === ".") {
        currentValue = "0.";
      } else {
        currentValue = parseFloat(eventValue);
      }
    } else if (!total && !action && currentValue && eventType === "number") {
      let tmpNumber = currentValue.toString();
      if (tmpNumber.length >= 10) {
        return;
      }
      if (tmpNumber.includes(".") && eventValue === ".") {
        return;
      } else {
        tmpNumber = tmpNumber + eventValue.toString();
      }
      currentValue = tmpNumber;
    } else if (!total && !currentValue && eventType === "action") {
      total = 0;
      action = eventValue;
    } else if (!total && currentValue && eventType === "action") {
      total = currentValue;
      action = eventValue;
      currentValue = undefined;
    }

    if (eventType === "reset") {
      total = undefined;
      action = undefined;
      currentValue = undefined;
    }
    if (eventType === "cancel") {
      currentValue = undefined;
    }

    if (eventType === "percent") {
      if (typeof total !== "undefined" && typeof currentValue !== "undefined") {
        currentValue = parseFloat(currentValue) / 100;
      }
    }

    this.props.updateResult({ total, action, currentValue });
  };
  render() {
    return (
      <button
        id={this.props.id}
        value={this.props.value}
        onClick={this.handleBtn}
      >
        {this.props.label}
      </button>
    );
  }
}

class Display extends React.Component {
  render() {
    const { total, currentValue, error } = { ...this.props.result };
    return (
      <div id="display">
        <p id="answer">
          {currentValue !== undefined
            ? currentValue
            : total !== undefined ? total : 0}
        </p>
        <div id="history">{error}</div>
      </div>
    );
  }
}

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