Good Morning,

How can I open a modal, by another file?

example:

MyModal:

import React from 'react';
import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';
class MyModal extends React.Component {
constructor(props) {
super(props);
this.state= {
modal:false
};
}
toggle= () => {
this.setState({
modal:false
});
}
render() {
return (
<Container>
<Buttoncolor="danger"onClick={this.toggle}>Modal</Button>
<ModalisOpen={this.props.modal}toggle={this.props.toggle}>
<ModalHeadertoggle={this.toggle}>{this.props.ModalHeader}</ModalHeader>
<ModalBody>
(...)
</ModalBody>
<ModalFooter>
<Buttoncolor="secondary"onClick={this.toggle}>Close</Button>{' '}
<Buttoncolor="primary">Save changes</Button>
</ModalFooter>
</Modal>
</Container>
);
}
}
export default MyModal;

App.js:

import React, { Component } from 'react';
import './App.css';
import { Container, Button } from 'mdbreact'
import MyModal from './componentes/MyModal';
class App extends Component {
constructor(props) {
super(props);
this.state= {
modal:false
};
}
abrirModal= () =>{
this.setState({
modal:!this.state.modal
});
console.log(this.state.modal)
}
render() {
return (
<Container>
<ButtononClick={this.abrirModal}color="info">Modal</Button>
<MyModal
modal={this.state.modal}
ModalHeader="teste"
></MyModal>
</Container>
);
}
}
export default App;

I want to have control of opening and closing modal, by the button that is in the App.js file.
This opens, but does not close,what would be the right way to do it?