Rewriting DevExtreme Dialog / Popup component to MaterialUI equivalent (react / javascript) - reactjs

Question

I'm moving away from using DevExtreme/DevExpress components, and the last one to go is my Popup / Dialog component.
The way the old popup worked, is that it was rendered in the background. The popup is rendered, but hidden, until a visible attribute is passed to it. I had it coded as the following:
<UniversalPopupComponent
popupDefinition={ownerDatabaseView}
popupValues={databaseRowData}
onSubmit={this.myPopupSubmitted}
onCancel={this.myPopupCancelled}
visible={this.state.popupVisibility}
/>
Material UI component does not seem to work the same way. For starters, how do I tell MaterialUI Dialog to only show when I click a button where the Dialog component is called, before I get to the part of actually adding data and processing data that is passed inside to generate the content?
I currently have the MUI progress (PopupMUI.js) :
class UniversalPopupComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
open: this.props.open
}
}
handleClickClose = () => {
this.setState({open: false})
}
render() {
return (
<Dialog open={this.state.open} onClose={this.handleClickClose}>
<DialogContent>
placeholder
</DialogContent>
<DialogActions>
<Button onClick={this.handleClickClose}> Close </Button>
<Button onClick={this.handleClickClose}> Submit </Button>
</DialogActions>
</Dialog>
)
}
}
export default UniversalPopupComponent;
and in App.js contains the following related things:
class App extends React.Component {
state = {
open: false,
};
handlePopupOpen = () => {
this.setState({open:true})
}
render() {
return (
<div> ...
<Button onClick={this.handlePopupOpen}> Open Menu </Button>
<UniversalPopupComponent open={this.state.open} />
... </div>
)}
I cannot get the Dialog to open this way, by passing the state of 'open' as 'true' to the Dialog inside the component with props.
However, if I have the below, then Dialog opens fine and closes fine too (click close is defined as just setState({open:false})
<Button onClick={this.handlePopupOpen}> Open Menu </Button>
<Dialog open={this.state.open} onClose={this.handleClickClose}>
<DialogContent>
placeholder
</DialogContent>
<DialogActions>
<Button onClick={this.handleClickClose}> Close </Button>
<Button onClick={this.handleClickClose}> Submit </Button>
</DialogActions>
</Dialog>
I have not set up to pass any data yet, as the big problem is that the dialog won't open for me to start setting everything up and re-writing parts.

Answer 1

So my stupid brain completely forgot that, once something is in constructor, it does not get updated. So I was passing the open prop, but only writing it once.
I simply added a componentDidUpdate that compares current state of Open to new state of Open from prop, if they are different, write new state of prop.
Then I added a callback, so that when something is closed, it sets the state of open to false, which updates the component and closes the menu.