React: Closing Modal in Child Component from Parent

Question

I have a modal in a child component that handles a delete function in the parent component. The child is holding the state of the modal (open or closed) as this seems the most logical place for it.

Parent

 removeItem() {
   console.log('clicked');
  };

 ...

 <DeleteButton deleterecord={()=>this.removeItem(data.row._original._id)}/>

Child

close() {
  this.setState({ showModal: false })
};

open() {
  this.setState({ showModal: true })
};


render() {

 return(
  <div>
    <Button
    bsStyle="primary"
    bsSize="small"
    onClick={this.open.bind(this)}
  >
    Delete
  </Button>

  <Modal
    show={this.state.showModal}
    onHide={this.close.bind(this)}
    bsSize="small"
    >
   ...

How should I close the modal from the parent after the removeItem code has run.

You could call a function in child component from parent that essentially updates the state of the child component. Check this https://stackoverflow.com/questions/40235420/call-child-method-from-parent-in-react/40235756#40235756 — Shubham Khatri, Dec 05 '17 at 08:50
Edited my solution to use a reference to call the child close function. Check if it works. — Rodius, Dec 05 '17 at 09:22

Rodius · Accepted Answer · 2017-12-05T09:20:26.090

6

You could use a ref to call the child close function?

Parent

    removeItem() {
       console.log('clicked');
       this.child.close();
    }

   render() {
      return (
         <div>
            <ChildWithModal ref={(ref) => { this.child = ref; }} />
         </div>
      );
   }

Child

...

close() {
   this.setState({ showModal: false })
};

edited Dec 05 '17 at 09:20

answered Dec 05 '17 at 08:52

Rodius

2,271
14
19

Thanks for this, but the component is in the parent too. I will amend my question to include some of the child code – Nick Wild Dec 05 '17 at 09:06
Thanks for this what should "this.child" actually be? The name of the child component? – Nick Wild Dec 05 '17 at 09:40
"child" is the name of the ref. You can assign whatever name you please =). Try to use something that will be easier to identify the component with. Think of it as an alias for the child component. – Rodius Dec 05 '17 at 09:42
1

Great thanks. That's what I thought, but it doesn't close the modal. :-( – Nick Wild Dec 05 '17 at 10:16
If I console log "this.child" from the removeItem function I can see the child and it's state, but I can't see the close(). This close() is not within the render of the child though. Is that the issue? – Nick Wild Dec 05 '17 at 12:21
Not sure why the function isn't showing. Maybe you need to bind the close function in the child constructor?. It should work: https://stackoverflow.com/questions/37949981/call-child-method-from-parent – Rodius Dec 05 '17 at 12:30
OK thanks that works and I can see the close function now from the parent, but when I call it there is still no effect. – Nick Wild Dec 05 '17 at 13:20
OK so it does call the close function from the parent and even changes the state, but it doesn't close the modal. Any ideas? – Nick Wild Dec 05 '17 at 20:58
I have the same problem and can't make out what's going on here, there's not enough code to understand the solution. – CoderSteve Jan 11 '19 at 12:55

React: Closing Modal in Child Component from Parent

1 Answers1