Opening Modal from different component

Question

CardComponent:

export class Card extends Component<Prop, State> {
      state = {
        isCancelModalOpen: false,
      };

      marketService = new MarketService();
      deleteMarket = () => {
        this.marketService
          .deleteMar()
          .then((response) => {
          })
          .catch((error) => {
            console.log(error);
          });
      };
      handleModalToggle = () => {
        this.setState(({ isCancelModalOpen }) => ({
          isCancelModalOpen: !isCancelModalOpen,
        }));
      };

      render() {
        const {isCancelModalOpen, isDropdownOpen } = this.state;
        const dropdownItems = [
          <DropdownItem
            key="action"
            component="button"
            onClick={this.handleModalToggle}
          >
            Delete 
          </DropdownItem>
        ];
        return (      
            {this.CancelModal.map((listing) => (
        <DeleteModal handleModal={this.handleModalToggle}
        deleteProd = {this.deleteProduct}
        description = {listing.description} ></DeleteModal>
            ))}
        );
      }
    }

DeleteModal Component:

interface Prop {
 description: string;
 handleModal: Function;
 deleteProd: Function;
}
class DeleteModal extends Component<Prop, State> {
  state = {
    deleteConfirmModel: false
  };


  render() {
    const { deleteConfirmModel } = this.state;
const {description} = this.props;
    return (

        <Modal
          isSmall
         title="Confirmation"
         isOpen={deleteConfirmModel}
        onClose={() => this.props.handleModal}
        showClose = {false}
          actions={[
            <Button
              key="confirm"
              variant="primary"
              onClick={() => this.props.deleteProd}
            >
              Delete
            </Button>,
              <Button key="cancel" variant="link"  onClick={() => this.props.handleModal}>
              Cancel
            </Button>

          ]}
        >
{description}
        </Modal>

    );
  }
}

export default DeleteModal;

I want DeleteModal component to get open on click of Dropdown Delete button available in Card component. There is no error in the code, still I am not able to trigger modal on click of Dropdown from Card component. Can anyone help me with what's wrong with the code?

Answer 1

So I found the solution to call the modal from different component: In the card component: to call deleteModal component:

<DeleteModal
      displayModal={deleteModalOpen}
      handleModal={this.handleModalToggle}
      description="Are you sure you want to delete"
    />

DisplayModal, handleModal,decription will be props in DeleteModal component:

DeleteModal:

interface Prop {
      displayModal: boolean;
      handleModal: Function;
      description: string;
    }
 <Modal
          isSmall
          title="Confirmation"
          isOpen={this.props.displayModal}
          onClose={() => this.props.handleModal()}
          showClose={false}
          actions={[
            <Button
              key="cancel"
              variant="link"
              onClick={() => this.props.handleModal()}
            >
              Cancel
            </Button>,
          ]}
        >
          {this.props.description}
        </Modal>