as @Christian Fritz said you didn't call the method to render the model
now you can do the render in the render return like this
render(){
return (
<Button onClick={this.handleOpen} style={{margin: 0, position: 'absolute',
top: '50%', left: '50%' }}
variant="contained" color="primary">Open Modal</Button>
<Modal open={this.state.modalToggle} onClose={this.handleClose}>{this.renderModalBody()}</Modal>
)
}
because material ui will not open the model until it value is true and I recommend to you to use functional component because is much more easy and can be handle better because every state is manage by itself and you can do almost the same stuff as class component plus as it seems react team try to push the use of functional component more
I write a sample code is function component :
export default UserShow;
const ModelTest = () => {
const [open, setOpen] = useState(false);
return (
<>
<Button
onClick={() => setOpen(true)}
style={{ margin: 0, position: "absolute", top: "50%", left: "50%" }}
variant="contained"
color="primary"
>
Open Modal
</Button>
<Modal open={open} onClose={() => setOpen(false)}>
<div style={getModalStyle()} className={styles.paper}>
<h2 id="simple-modal-title">Text in a modal</h2>
<p id="simple-modal-description">This is a test of modal.</p>
</div>
</Modal>
</>
);
};
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…