How to show Manual record status popup modal after submitted data succesffully? and if not submiited then show error popup modal?

Question

how to close Add country popup after submitting the form? I am new in react js and using bootstrap 5 modal component for popup... i want to show that if data is submiitted successfully then showing success Record status popup otherwise it will showing an error Record status popup

country.js component

import React, { Component } from 'react'
import '../../components/masters/masters.common.css';
import  AddCountry from './addCountry'
import Tabs from '../CommonMasters/tabs';

class Country extends Component {
  constructor(props) {
    super(props);
    this.get = this.get.bind(this);
    this.newRecord = this.newRecord.bind(this);
    this.state = {
      currentIndex: -1,
      id: null,
      countrycode: "",
      name: "",
      region: "",
      isClosePopup : false
    };
  }

  refreshData() {
    this.setState({
      currentIndex: 1,
    });
  }

  get() {
    this.setState({ currentIndex: 1 });
  }

  newRecord() {
    this.setState({
      id: null,
      countrycode: "",
      name: "",
      isClosePopup: false
    })
  };

  render() {
    return (
      <>
        <div className="masterContainer">
          <h4 className="pb-2 md-2 ">Countries</h4>
          <div className=" d-flex row">
            <div className="col-8">
              <input className="form-control mb-4" id="tableSearch" type="text"
                placeholder="Search" />
            </div>
            <div className="col-4">
              <div className='d-grid gap-2 d-md-block mb-4'>
                <button className="btn btn-primary me-3" type="button">Search</button>
                <button className="btn btn-primary " type="button" data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={this.newRecord}>Add + </button>
              </div>
            </div>
          </div>
          {/* modal  */}
          <div className="modal fade" id="exampleModal" data-bs-backdrop="static" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          { !this.state.isClosePopup &&
             <AddCountry show={false} />
          }
          </div>
          <Tabs type="country"/>
        </div>
      </>
    )
  }
}

export default Country;

addCountry.js

import React, { Component } from 'react'
import { connect } from "react-redux";
import { getAuthorizedList } from '../../redux/master/Country/actions'
import { createRecord } from "../../redux/master/Country/actions";
import AddRecordSuccess from '../CommonMasters/addRecordSuccess';
import AddRecordFail from '../CommonMasters/addRecordFail';

class AddCountry extends Component {
  constructor(props) {
    super(props);
    this.saveRecord = this.saveRecord.bind(this);
    this.state = {
      id: null,
      countrycode: "",
      name: "",
      isSubmit: false
    };
  }

  onChangeCountryCode = (e) => {
    this.setState({
      countrycode: e.target.value
    })
  }
  onChangeCountryName = (e) => {
    this.setState({
      name: e.target.value
    })
  }

  componentDidUpdate() {
    this.props.getAuthorizedList()
  }

  saveRecord() {
    const data = {
      countrycode: this.state.countrycode,
      name: this.state.name,
    }
    this.props
      .createRecord(data)
      .then((response) => {
        console.log("addedresponsee....", response)
        this.setState(() => ({
          countrycode: data.countrycode,
          name: data.name,
          isSubmit: true,
        }));
      })
      .catch((err) => {
        console.log("errror", err);
      });
  }

  render() {
    return (
      <>
        <div show={true} className="modal-dialog modal-dialog-centered">
          <div className="modal-content">
            <div className="modal-header bg-dark text-white">
              <h5 className="modal-title" id="exampleModalLabel">Add Country</h5>
              <button type="button" className="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body bg-light">
              <form>
                <div className="row">
                  <div className="mb-3 col-6">
                    <label htmlFor="exampleInputPassword1" className="form-label">Country Code</label>
                    <input type="text" className="form-control" name="countrycode"
                      placeholder="Country Code" id="exampleInputPassword1"
                      onChange={this.onChangeCountryCode}
                    />
                  </div>
                  <div className="mb-3 col-6">
                    <label htmlFor="exampleInputPassword1" className="form-label">Country Name</label>
                    <input type="text" className="form-control" name="name"
                      placeholder="Country Name" id="exampleInputPassword1"
                      onChange={this.onChangeCountryName}
                    />
                  </div>
                </div>
              </form>

            </div>
            <div className="modal-footer bg-light">
              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="button" className="btn btn-primary" onClick={this.saveRecord} data-bs-toggle="modal" data-bs-target="#recordModal">
                Save
              </button>
            </div>
          </div>
        </div>

        {/* record status modal */}
        { this.state.isSubmit === true ?
          <AddRecordSuccess/> : <AddRecordFail/>
        }
      </>

    )
  }
}

export default connect(null, { createRecord, getAuthorizedList })(AddCountry);

SuccessPopup.js

import React, { Component } from 'react'

class AddRecordSuccess extends Component {
    constructor(props) {
        super(props);
        this.state = {
            
        }
    }

    render() {
        return (
            <>
                {/* record status modal */}
                <div className="modal fade" id="recordModal" data-bs-backdrop="static" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">
                            <div className="modal-header bg-dark text-white">
                                <h5 className="modal-title" id="exampleModalLabel">Record Status</h5>
                                <button type="button" className="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div className="modal-body bg-light">
                                Record add successfully
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

export default AddRecordSuccess;

ErrorPopup.js

import React, { Component } from 'react'

class AddRecordFail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            
        }
    }

    render() {
        return (
            <>
                {/* record status modal */}
                <div className="modal fade" id="recordModal" data-bs-backdrop="static" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">
                            <div className="modal-header bg-dark text-white">
                                <h5 className="modal-title" id="exampleModalLabel">Record Status</h5>
                                <button type="button" className="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div className="modal-body bg-light">
                                Record failed to add
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

export default AddRecordFail;