Open the modal from different component in react

Question

My Modal:

class DeleteModal extends Component<Prop, State> {
  state = {
    deleteConfirmModel: false
  };

  handleModalToggle() {
    this.setState(({ deleteConfirmModel }) => ({
      deleteConfirmModel: !deleteConfirmModel,
    }));
  };
  Service = new Service();
  delete = () => {
    this.Service
      .delete()
      .then((response) => {
        window.location.reload(false);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  render() {
    const { deleteConfirmModel } = this.state;
    return (
     <React.Fragment>
        <Modal
          isSmall
         title="Confirmation"
         isOpen={deleteConfirmModel}
        onClose={() => this.handleModalToggle()}
          actions={[
            <Button
              key="confirm"
              variant="primary"
              onClick={this.delete}
            >
              Delete
            </Button>,
              <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
              Cancel
            </Button>

          ]}
        >
          Are you sure you want to delete the item?
        </Modal>
       </React.Fragment>
    );
  }

My other component:

export class SampleCard extends Component<Prop, State> {
  state = {
    deleteConfirmModel: false,
  };
  handleModalToggle = () => {
    this.setState(({ deleteConfirmModel }) => ({
      deleteConfirmModel: !deleteConfirmModel,
    }));
  };

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

    return (
      <React.Fragment>
        <Row>

            <Card
              isCompact={true}
              isSelectable={true}
              className={"productListing"}
            > 
                <Button
                  onClick={() => this.handleModalToggle()}
                  isDisabled={false}
                > Delete Modal</Button>

            </Card>

        </Row>
      </React.Fragment>
    );
  }
}

From my SampleCard component, I want to open my deleteModal component on click of Delete button.Can anyone help with how to do it. Because when i am writing in my SampleCard component, I m getting following error: No overload matches this call. Overload 1 of 2, '(props: Readonly): "

Answer 1

While trying to reproduce it, I noticed you miss the export keyword on your modal component.

You also have a typo on deleteConfirmModEl => deleteConfirmModAl .

After fixing it and simplifyingyour code, it works for me. Here is the repro on Stackblitz , and in case it does not ork, the code:

SampleCard:

import React from "react";
import DeleteModal from "./DeleteModal";

export default class SampleCard extends React.Component {
  state = {
    deleteConfirmModal: false
  };

  handleModalToggle = () => {
    this.setState(({ deleteConfirmModal }) => {
      console.log('deleteConfirmModal = ', deleteConfirmModal);
      return {
        deleteConfirmModal: !deleteConfirmModal
      };
    });
  };

  render() {
    console.log('this.state.deleteConfirmModal = ', this.state.deleteConfirmModal);
    return (
      <React.Fragment>
        <button onClick={() => this.handleModalToggle()}>Delete Modal</button>
        <DeleteModal displayed={this.state.deleteConfirmModal} />
      </React.Fragment>
    );
  }
}

DeleteModal:

import React from 'react';

export default class DeleteModal extends React.Component {
constructor(props){
  super(props);
  this.displayed = this.props.displayed;
}
  render() {
    console.log('props = ', this.props);
    // You can manage the style through a class of course, would be better
    return (
        <div className="modal" style={{display: this.props.displayed ? 'block':'none'}}>
          Are you sure you want to delete the item?
        </div>
    );
  }
}

Small css to reproduce a modal:

html, body, #root{
  margin: 0;
  padding: 0;
  position: relative;
}

.modal{
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50px;
  left: 50px;
  border: 1px solid black;
  border-radius: 4px;
}