Может / должен State содержать свойство, значением которого является функция

Question

Я пытался построить калькулятор в React.Итак, я создал компоненты: 1. Калькулятор 2. Клавиатура 3. Кнопка 4. Дисплей

Для таких символов операций, как (+, -, x, /), я отправляю функцию в приложение «Калькулятор» и удерживаю еев государственном объекте.Пожалуйста, не обращайте внимания на логику расчета / кода, я здесь только новичок, и я знаю, что мне многое нужно исправить. Мой главный вопрос Вот как я отправляю функцию для каждого символа в состояние и задаю в свойстве операции. Это хорошая практика?

Button.js

function Button(props){
    return(
        <input type="button" className="btn m-2 " value={props.value} onClick={()=>(props.onClick(props.value, props.calculate))} />
    )
}

Keypad.js

function KeyPad(props) {

    function renderButton(value, Calculate) {
        return (<Button value={value} calculate={Calculate} onClick={props.onClick} />)
    }
    return (
        <div className="KeyPad container">
            <div className="row">
                <div className="col-md-4">
                    {renderButton("1")}
                    {renderButton("2")}
                    {renderButton("3")}
                    {renderButton("/", function Divide(a, b, callback) { callback(Number(a) / Number(b));})}
                </div>
            </div>

            <div className="row">
                <div className="col-md-4">
                    {renderButton("4")}
                    {renderButton("5")}
                    {renderButton("6")}
                    {renderButton("x", function Multiply(a, b, callback) { callback(Number(a) * Number(b));})}
                </div>
            </div>

            <div className="row">
                <div className="col-md-4">
                    {renderButton("7")}
                    {renderButton("8")}
                    {renderButton("9")}
                    {renderButton("-", function Subtract(a, b, callback) { callback(Number(a) - Number(b));})}
                </div>
            </div>

            <div className="row">
                <div className="col-md-4">
                    {renderButton(" ")}
                    {renderButton(" ")}
                    {renderButton("=")}
                    {renderButton("+", function Add(a, b, callback) {callback(Number(a) + Number(b));})}
                </div>
            </div>
        </div>
    )
}

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      operand1: "",
      operation: null,
      operand2: "",
      currentValue: ""
    }
  }

  handleClick(input, Calculate) {
    var operand1 = this.state.operand1;
    var operand2 = this.state.operand2;

    //alert(typeof (Calculate));
    if (typeof (Calculate) === 'function') {
      var func;
      if (this.state.operation === null) {
        func = Calculate;
      } else {
        func = this.state.operation;
      }
      this.setState({ operation: Calculate });
      if (operand1 !== "" && operand2 !== "") {
        func(operand1, operand2, (result) => { this.setState({ operand1: result, currentValue: result, operand2: "" }); })
      } else if (operand2 !== "") {
        func(0, operand1, (result) => { this.setState({ operand1: result, currentValue: result, operand2: "" }); })
      }
    } else {
      //it's input feed:
      if (typeof (this.state.operation) !== "function") {
        var value = String(this.state.operand1) + String(input);
        this.setState({ operand1: value, currentValue: value })
      }
      else {
        //we know first operand already holds the value;
        var value = String(this.state.operand2) + String(input);
        this.setState({ operand2: value, currentValue: value })
      }
    }
  }

  render() {
    return (
      <div className="App">
        <Display value={this.state.currentValue} />
        <KeyPad onClick={(a, b) => this.handleClick(a, b)} />
      </div>
    );
  }
}