Я хочу очистить поля и убрать значок плюса, как только я изменю режим с правки или просмотра, чтобы добавить

Question

Я думаю, что он не понимает, что я переключаюсь в режим «добавления» ... из-за этого, когда я нажимаю значок «плюс», он направляется в режим «добавления», но все же предыдущие результаты (из режим редактирования, например) остается, и значок плюса все еще существует ... Но значок плюса не появляется в самом первом случае получения формы добавления ... Пожалуйста, помогите мне разобраться в этом ...

Ниже мой код ..

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";
import { reset } from "redux-form";
//import { formValueSelector } from "redux-form";
// import "bootstrap/dist/css/bootstrap.css";
import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const regionStates = {
  add: {
    title: "Add New Region",
    button: "Add New Region",
    //value: "value here",
    selectedRegion: null,
    mode: "add",
    fieldDisabled: false
    //btnDisabled: true
    //handlerFunction: "Add"
  },

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

  edit: data => {
    return {
      title: "Edit Region",
      button: "Update Region",
      selectedRegion: data,
      //value: null,
      mode: "edit",
      fieldDisabled: false
      // btnDisabled: true
      //handlerFunction: "Edit"
    };
  }
};

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

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

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

  // addForm = () => {
  //   this.setState(regionStates.add);
  // };

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

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

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

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

      selectedRegion = this.state.selectedRegion; // CONSISTS OF the edited name, code and description
      selectedRegion.name = event.regionName;
      selectedRegion.code = event.code;
      selectedRegion.description = event.description;
    }

    // const selector = formValueSelector("region_form");
    // const values = selector(state, "regionName", "code", "description");
    // console.log(
    //   "regionName:",
    //   event.regionName,
    //   "code:",
    //   event.code,
    //   "description",
    //   event.description
    // );
    let operation;
    switch (this.state.mode) {
      case "view":
        operation = this.editForm(selectedRegion);
        break;

      case "add":
        operation = this.addRegion(event);
        // handlerFunction = "Add";
        break;

      case "edit":
        //this.setState({ selectedRegion: selectedRegion });
        operation = this.editRegion(selectedRegion);
        //handlerFunction = "Edit";
        break;
    }
  };

  render() {
    return (
      <>
        {/* <Container className="container-fluid"> */}
        <Container>
          <Row className="space"></Row>

          <Row>
            <Col sm={4}>
              <h3 className="space2">
                Region
                {/* {console.log(this.state, regionStates.add)} */}
                {/* {JSON.stringify(this.state) !==
                  JSON.stringify(regionStates.add) && ( */}
                {this.state !== regionStates.add && (
                  <a href="#" onClick={() => this.setState(regionStates.add)}>
                    <FontAwesomeIcon icon={faPlusCircle} color="#007bff" />
                  </a>
                )}
              </h3>

              {/* <i class="fas fa-plus"></i> */}
              {/* <RegionForm {...this.props}/>            */}
              <RegionForm
                title={this.state.title}
                button={this.state.button}
                selectedRegion={this.state.selectedRegion}
                mode={this.state.mode}
                onSubmit={this.handleSubmit}
                fieldDisabled={this.state.fieldDisabled}
                addForm={this.addForm}
                //btnDisabled={this.state.btnDisabled}
                //btnRefresh={this.state.btnRefresh}
              />
            </Col>

            <Col sm={8}>
              <RegionList
                //pathname={this.props.pathname}
                viewForm={this.viewForm}
                editForm={this.editForm}
                mode={this.state.mode}
                //addForm={this.state.addForm}
                //handlerFunction={this.handlerFunction}
              />
            </Col>
          </Row>
        </Container>
      </>
    );
  }
}

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

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