React-Redux отправка формы

Question

Я новичок в React-Redux .. И я получаю ошибки при попытке закодировать оператор switch в моем родительском компоненте (Region.jsx). Ожидается свойство, метод или конструктор. Это показывает ошибку около 'let selectedRegion'. Как я могу исправить это?

И вот мой код ..

import React, { Component } from "react";
import RegionList from "./RegionList";
import RegionForm from "./RegionForm";
import { Row, Col, Container } from "react-bootstrap";
import "./regionManagement.scss";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { regionActions } from "./ducks/index";

const regionStates = {
  add: {
    title: "Add New Region",
    button: "Add New Region",
    value: "value here",
    selectedRegion: null,
    mode: "add",
    isDisabled: false
  },

  view: data => {
    return {
      title: "View Region",
      button: "Edit Region",
      selectedRegion: data,
      value: null,
      mode: "view",
      isDisabled: true
    };
  },

  edit: data => {
    return {
      title: "Edit Region",
      button: "Update Region",
      selectedRegion: data,
      value: null,
      mode: "edit",
      isDisabled: false
    };
  }
};

class Region extends Component {
  constructor(props) {
    super(props);
    this.state = regionStates.add;
  }

  viewForm = data => {
    this.setState(regionStates.view(data));
  };

  editForm = data => {
    this.setState(regionStates.edit(data));
  };

  addRegion = event => {
    this.props.addRegion(event);
  };

  editRegion = event => {
    this.props.editRegion(this.state.selectedRegion);
  };

  componentDidMount() {
    this.props.getRegion();
  }

  // var selectedRegion;
  //   // if (this.state.mode != "add") {   // also correct
  //   if (!this.state.add) {
  //     selectedRegion = this.state.selectedRegion;
  //     //selectedRegion.name = event.regionName;

  //   }

    let operation;
    switch (this.state.mode) {
      case "view":
        operation = this.editForm(selectedRegion);
        break;

      case "add":
        operation = this.addRegion();
        break;

      case "edit":
        operation = this.editRegion(selectedRegion);
        break;

      case "delete":
        operation = this.deleteRegion;
        break;
    }


  render() {
    return (
      <>
        <Container>
          <Row className="space"></Row>

          <Row>
            <Col sm={4}>
              <h3 className="space2"> Region</h3>
              {/* <RegionForm {...this.props}/>            */}
              <RegionForm
                title={this.state.title}
                button={this.state.button}
                selectedRegion={this.state.selectedRegion}
                mode={this.state.mode}
                //onSubmit={this.handleSubmit}
                // show={this.state.show}
                operation={operation}
                isDisabled={this.state.isDisabled}
              />
            </Col>

            <Col sm={8}>
              <RegionList
                regions={this.props.regions}
                pathname={this.props.pathname}
                viewForm={this.viewForm}
                editForm={this.editForm}
                //addRegion={this.addRegion}
              />
            </Col>
          </Row>
        </Container>
      </>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state,
    region: state,
    regions: state.Regions.regions
  };
}

export default withRouter(connect(mapStateToProps, regionActions)(Region));

Пожалуйста, объясните мне, как решить эту проблему. Вместо использования onSubmit.