Get modal to fire from parent component - reactjs

Question

Noob question here. How do I fire the toggle component of the Modal from the parent component? I want the modal to open when the button is clicked on the parent component. The button will submit a form and once the form has been submitted I want the modal to fire. I'm trying to get it to fire in function handleSubmit(e)
Child Component: Modal.jsx
class ModalExample extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState(prevState => ({
modal: !prevState.modal
}));
}
render() {
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
</Modal>
</div>
);
}
}
Path: Parent.jsx
export default function ForgotPassword() {
function handleSubmit(e) {
e.preventDefault();
}
return (
<div className="container h-100">
<ModalExample toggle />
<button onClick={this.handleSubmit}>Open modal</button>
</div>
);
}

Answer 1

You can use refs as follows
export default function ForgotPassword() {
function handleSubmit(e) {
e.preventDefault();
}
return (
<div className="container h-100">
<ModalExample ref={instance => { this.child = instance; }} />
<button onClick={() => { this.child.toggle(); }}>Open modal</button>
</div>
);
}

Answer 2

There might be better ways, but the way I've done it is by pulling the toggle function to the parent class and passing both the function and the state value to the modal in props.
You can then call that props function in your modal to toggle its display, although this will turn your pure component into a stateful component.
Child Component: Modal.jsx
class ModalExample extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Modal isOpen={this.props.modal} toggle={this.props.toggle} className={this.props.className}>
<ModalHeader toggle={this.props.toggle}>Modal title</ModalHeader>
</Modal>
</div>
);
}
}
Parent: Parent.jsx
class ForgotPassword() extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState(prevState => ({
modal: !prevState.modal
}));
}
return (
<div className="container h-100">
<ModalExample toggle={this.toggle} modal={this.state.modal} />
<button onClick={this.handleSubmit}>Open modal</button>
</div>
);
}