Open Modal in React JS Application on Page Load automatically

Question

Below is the App class component in which I want to open Modal once the page gets loaded completely.

Also I tried using componentDidMount() lifecycle method but it failed.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleSHow = this.handleShow.bind(this);
        this.state = {
            modalState : true
        }
    }

    handleShow = () => {
        this.setState(() => {
            return {
                modalState : false
            };
        });
    }

    render() {
        console.log(this.state.modalState)
        return (
            <div>
                <h1 className="main-title">My Profile</h1>
                <MainContent />
            </div>
        );
    }
}

export default App;

Answer 1

For the correct answer, the Modal code is also required. We need to know what kind of modal you are using and how does it's toggle mechanism works.

However, looking at your code I have found a typo.

this.handleSHow = this.handleShow.bind(this);
Here in this.handleSHow the H is in Caps. So if you are calling the method to trigger the Modal's open state like so this.handleShow() then it will not work.

Either fix the typo or call the method like this: this.handleSHow().

Edit: Looking again at your code I just realized you don't need this.handleSHow = this.handleShow.bind(this); this line because you are using arrow function syntax to declare your method i.e., handleShow = () => . Arrow functions automatically bind the this context to your function from outer scope which in this case is your App Component itself so you don't need to .bind(this) in your constructor.

If you still want to keep this.handleSHow = this.handleShow.bind(this); then you have to change your arrow function handleShow = () => to handleShow() { ... } syntax.

Answer 2

Assuming that you're using Bootstrap Modal, here is a basic example:

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            modalState: true
        };

        this.handleShow = this.handleShow.bind(this);
    }

    handleShow() {
        this.setState({ modalState: !this.state.modalState });
    }

    render() {
        return (
            <div>
                <div className={"modal fade" + (this.state.modalState ? " show d-block" : " d-none")} tabIndex="-1" role="dialog">
                    <div className="modal-dialog" role="document">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h5 className="modal-title">My Profile</h5>
                                <button type="button" className="close" onClick={this.handleShow}>
                                    <span>&times;</span>
                                </button>
                            </div>
                            <div className="modal-body">...</div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-secondary" onClick={this.handleShow}>Close</button>
                                <button type="button" className="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>

And if you're using react-bootstrap, use like this:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true
        };
        
        this.handleClose = this.handleClose.bind(this);
        this.handleShow = this.handleShow.bind(this);
    }
    
    handleClose (){
        this.setState({ show: false });
    };
    
    handleShow (){
        this.setState({ show: true });
    };
    
    render() {
        return(
            <div>
                <ReactBootstrap.Button variant="primary" onClick={this.handleShow}>Launch modal</ReactBootstrap.Button>

                <ReactBootstrap.Modal show={this.state.show} onHide={this.handleClose}>
                    <ReactBootstrap.Modal.Header closeButton>
                        <ReactBootstrap.Modal.Title>My Profile</ReactBootstrap.Modal.Title>
                    </ReactBootstrap.Modal.Header>
                    <ReactBootstrap.Modal.Body>...</ReactBootstrap.Modal.Body>
                    <ReactBootstrap.Modal.Footer>
                        <ReactBootstrap.Button variant="secondary" onClick={this.handleClose}>Close</ReactBootstrap.Button>
                        <ReactBootstrap.Button variant="primary">Save Changes</ReactBootstrap.Button>
                    </ReactBootstrap.Modal.Footer>
                </ReactBootstrap.Modal>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>

Answer 3

You could do something like this

class App extends React.Component {
constructor(props){
  super(props);
  this.handleSHow = this.handleShow.bind(this);
  this.state = {
    modalState : false
  }
}

componentDidMount(){
  this.setState({
    modalState : true
  }) 
}

render()
{
  console.log(this.state.modalState)
  return(
      <div>
      {this.state.modalState ? <YourModal/> : null}
      <h1 className="main-title">My Profile</h1>
      <MainContent />
      </div>
      )
}
}

export default App;