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.

4 Answers

2
avinash On

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();
}
1
Ladi Aden On

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} />
// ... 
0
Community On

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()
0
Matteo Angelotti On
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>
    );
  }
}