CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
thechamp
thechamp

Reputation: 53

React Material UI modal not opening

I'm trying to put together a react component from material UI that opens a modal. I have the state for the toggle and I see the toggle change from false to true in the react developer console in chrome but the modal does not open when I click the button (the button only changes the state verified by react console).

import react from 'react'
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
import { withStyles } from "@material-ui/core/styles";

function rand() {
    return Math.round(Math.random() * 20) - 10;
}

function getModalStyle() {
    const top = 50 + rand();
    const left = 50 + rand();
  
    return {
      top: `${top}%`,
      left: `${left}%`,
      transform: `translate(-${top}%, -${left}%)`,
    };
  }
  
  const styles = ((theme) => ({
    paper: {
      position: 'absolute',
      width: 400,
      backgroundColor: theme.palette.background.paper,
      border: '2px solid #000',
      boxShadow: theme.shadows[5],
      padding: theme.spacing(2, 4, 3),
    },
  }));


class ModalTest extends react.Component {
    

    state = {
        modalToggle: false
    }

    componentDidMount(){
        
    }

    handleOpen = () => this.setState({modalToggle: true})

    handleClose = () => this.setState({modalToggle: false})
    
    renderModalBody(){
        return (
            <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>
        );
    }

    renderActionButtons(){
        return <Button onClick={this.handleOpen} style={{margin: 0, position: 'absolute',
                                                         top: '50%', left: '50%' }} variant="contained" color="primary">Open Modal</Button>
    }

    renderModal(){
        <Modal open={this.state.modalToggle} onClose={this.handleClose}>{this.renderModalBody()}</Modal>
    }

    render(){
        return this.renderActionButtons()
    }

}

export default withStyles(styles, { withTheme: true })(ModalTest)

Upvotes: 1

Views: 7876

Answers (1)

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

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>
    </>
  );
};

Upvotes: 2

Related Questions