React: How to close a modal from child opened from parent component

Question

I am opening child component modal by passing parent state as props to child. Is there any way to close the modal from child component itself without any interference from parent component.

class Parent extends Component {

    constructor(props) {
      super(props);
      this.showModal = this.showModal.bind(this);
      this.state = {
        showModal: false
      };
    }
    showModal() {
      this.setState({ showModal: true });
    }
    renderRow() {
      return (
        <tr>
          <td onClick={() => this.setState({ show: true })}>test</td>
          <ChildModal show={this.state.showModal}/>
        </tr>
      );
    }
}


class ChildModal extends Component {
  render() {
    return (
       <Modal show={this.props.showModal}>
            <Modal.Header closeButton> 
            <Modal.Title>Test</Modal.Title> 
            </Modal.Header>
            <Modal.Body> 
                {/* some text */}
            </Modal.Body>
        </Modal>
    );
  }
}

I want my child modal to be self contained. Is this even possible in react.

Answer 1

You need to pass a callback as a props in Child component , it will update Parent Component when you click on closeButton in child .

// Parent Component
callbackModal = () => {
   this.setState({ showModal: false });
}
//ChildButton
closeButtonClickHandler = () => {
  this.props.callbackModal();
}

Answer 2

A local state variable can only be controlled inside the component in which it was declared in.

You will not be able to close the modal from inside the child component without passing a method from the parent component that changes the state that is passed down.

So in order to close your modal, you'll need to create a method this.closeModal and pass it from the Parent to the child...

// Parent
closeModal = () => {
  this.setState({showModal: false});
}
// ...
<ChildModal show={this.state.showModal} handleClose={this.closeModal} />
// ... 

Answer 3

Yes, you can close it from the child component, but you'll need at least a little interference of parent component, and that is because you've defined the toggle state of this model in parent component.

simply define a method that will close the modal in parent component, pass it down to the child component as a prop, and call it there.

//in your parent component 
handleModalClose = ()=>{
this.setState({showModal: false})}

now pass it down to your child component and simply call it there on an event like

this.props.handleModalClose()

Answer 4

class Parent extends Component {

constructor(props) {
  super(props);
  this.showModal = this.showModal.bind(this);
  this.closeModal = this.closeModal.bind(this)
  this.state = {
    showModal: false
  };
}
showModal() {
  this.setState({ showModal: true });
}
closeModal() {
  this.setState({ showModal: false });
}
renderRow() {
  return (
    <tr>
      <td onClick={() => this.setState({ show: true })}>test</td>
      <ChildModal show={this.state.showModal} close={this.state.closeModal}/>
    </tr>
  );
}
}

class ChildModal extends Component {
  render() {
    return (
       <Modal show={this.props.showModal}>
            <Modal.Header closeButton> 
            <Modal.Title>Test</Modal.Title> 
            </Modal.Header>
            <Modal.Body> 
                <buttom onClick={this.props.closeModal()}> ......
            </Modal.Body>
        </Modal>
    );
  }
}

Answer 5

When you define a state in a parent component, pretty much everything around that state is handled from there. The child component can only receive data from the parent component in the form of props.

The parent component controls the opening and closing state of the modal so for you to be able to close the modal from the child component, you have to define a function closeModal on the parent component which will set the showModal variable (defined in the state of your parent component) from true back to false.

closeModal = () => {
      this.setState({ showModal: false });
    }

Then pass this function as props to the child component and call the function from there. When you click on the close button on the modal, the state will be updated on the parent component.