React Modal not working in Header Component

Question

I have a Login component in my header(bootstrap) which needs to open a Modal when I click. I am using the Modal from react-modal (npm package). Even though I am not getting an error the popup won't open.

this.state={
    openModal:false
}

closeModal=()=>{
    this.setState({openModal:false})
}

 handleOnClick=()=>{
     this.setState({openModal:true}
 }

Header Component

` <ul className="nav navbar-nav navbar-right">
                    <li onClick={this.handleOnClick()}><a href="#">
                    <Modal 
                        isOpen={this.state.openModal}
                        onRequestClose={this.closeModal}
                        style={customStyles}
                        contentLabel="Example Modal"
                    >
                    <span class="glyphicon glyphicon-user"></span></Modal> Sign Up</a></li>

                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>`

@aravind_reddy I have added the code where I am trying to open the modal — Erick, Jun 09 '18 at 05:56

score 1 · Answer 1 · answered Jun 09 '18 at 06:03

1

You need to remove the brackets () from the call. What you give to onClick is the function to call, not the code to run like in other frameworks like Angular.

So, that'll be onClick={this.handleOnClick}

answered Jun 09 '18 at 06:03

Meligy

35,654
11
85
109

Erick · Answer 2 · 2018-06-09T06:20:51.030

This is the working code.

   <ul className="nav navbar-nav navbar-right">
                            <li  onClick={this.handleOnClick}><a href="#">
                            <Modal 
                                isOpen={this.state.openModal}
                                onRequestClose={this.closeModal}
                                style={customStyles}
                                content

                            ><LoginComponent />
                        </Modal> Login</a></li>

React Modal not working in Header Component

2 Answers2