React. onClick event not firing

Question

In my navbar, I have a button that will display a submenu (list of items) when clicked. Each item is their own child component and when clicked I want them to fire an event. The onClick event listener is not responding at all. However, other mouse events do apply (onMouseEnter, onMouseOut etc). Anyone might know what's up?

Child Component: NotificationItem.js

import React from "react"
import { connect } from "react-redux"
import { updateNotification } from "../../actions/notificationActions"

class NotificationItem extends React.Component{
constructor(props){
    super(props)

    this.handleOnClick = this.handleOnClick.bind(this)
}

handleOnClick = (event) => {
    console.log("clicked")
    // let notificationId = this.props.notification._id
    // this.props.updateNotification(notificationId)
}

render(){
    let {avatar, description, seen} = this.props.notification
    return(
        <div
            onClick={this.handleOnClick}
            className="d-flex notification-wrapper" 
            style={ seen ? (
                { width: "250px", whiteSpace: "normal", padding: "0.5rem" } 
                ):( { width: "250px", whiteSpace: "normal", padding: "0.5rem", backgroundColor: "#d7e2f4" }
                )
            }
            >
            <div>
                <img src={avatar} style={{ width: "25px"}} className="mr-2 rounded-circle"/>
            </div>
            <div>
                {description}
            </div>
        </div>
    )
}

}

Parent component: NotificationFeed.js

import React from "react"
import { connect } from "react-redux"
import NotificationItem from "./NotificationItem"

class NotificationFeed extends React.Component{
constructor(props){
    super(props)
}

render(){
    let notifications = this.props.notification.notifications
    return(
        <div className="dropdown-menu">
            {notifications.map((notification, index) => {
                return(
                    <div key={index}>
                        <NotificationItem notification={notification}/>
                    </div>
                )
            })}         
        </div>
    )
}
}

const mapStateToProps = (state) => {
return{
    notification: state.notification
}
}

export default connect(mapStateToProps)(NotificationFeed)

Edit: Something I noticed that might be of help. I'm using a bootstrap class to create this dropdown toggle-effect. When clicking on one of the items, the submenu closes immediately, without firing my desired event handler on the component.

                <span className="dropdown" id="notifications-dropdown">
                <Link to="#" className="nav-link text-light dropdown-toggle" data-toggle="dropdown">
                    <span 
                        key={Math.random()}
                    >
                        <i className="fa fa-bell"></i>
                    </span> { windowWidth < 576 && "Notifications"}

                    <NotificationFeed/>

                </Link>
                </span>

If you're defining the event handlers that way you don't need the .bind line. I'm not sure if that would prevent the handler from firing though. — Herohtar
– Herohtar, Commented Dec 30, 2018 at 7:41
@Herohtar. I tried without the binding, didn't have an effect either. — Cat_Enthusiast
– Cat_Enthusiast, Commented Dec 30, 2018 at 7:45
You are missing a closing brace } at the end of NotificationItem component. Not sure if it's a copy paste problem or it's also missing in your source code. — Ahmad Maleki
– Ahmad Maleki, Commented Dec 30, 2018 at 8:02
you don't need this line in your constructor this.handleOnClick = this.handleOnClick.bind(this) (remove this) — Alwaysblue
– Alwaysblue, Commented Dec 30, 2018 at 8:04
troubleshoot this like any other issue - remove that bootstrap class/data-dropdown-whatever stuff and see if the click works. if so, bootstrap JS is likely altering the element, possibly replacing it with another (like what happens in other drop-down libraries) — Deryck
– Deryck, Commented Dec 30, 2018 at 9:26

Cat_Enthusiast · Accepted Answer · 2019-01-03 09:30:06Z

5

For those still interested, this was a problem with Bootstrap. Because the elements were created inside a Bootstrap dropdown it had some logic I couldn't see. Whenever I would click on an element, the dropdown closes before the event-handler would even fire.

Opted, to create my own dropdown instead. Thanks all!

answered Jan 3, 2019 at 9:30

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nipek · Accepted Answer · 2018-12-30 08:43:13Z

You created an arrow function, you do not need to bind it in the constructor

    import React from "react"
    import { connect } from "react-redux"
    import { updateNotification } from "../../actions/notificationActions"

    class NotificationItem extends React.Component{
    state = {}

    handleOnClick = (event) => {
        console.log("clicked")
    }


    //or do not use arrow function then bind in the constructor
     //constructor(props) {
          //super(props);
          //this.handleOnClick = this.handleOnClick.bind(this)
     //}

   // handleOnClick(event) {
     // console.log("clicked")
   // }


    render(){
        let {avatar, description, seen} = this.props.notification
        return(
            <div
                onClick={this.handleOnClick}
                className="d-flex notification-wrapper" 
                style={ seen ? (
                    { width: "250px", whiteSpace: "normal", padding: "0.5rem" } 
                    ):( { width: "250px", whiteSpace: "normal", padding: "0.5rem", backgroundColor: "#d7e2f4" }
                    )
                }
                >
                <div>
                    <img src={avatar} style={{ width: "25px"}} className="mr-2 rounded-circle"/>
                </div>
                <div>
                    {description}
                </div>
            </div>
        )
    }

Pixelomo · Accepted Answer · 2018-12-30 09:38:46Z

0

try this

onClick={ (e) => this.handleOnClick(e)}

edited Dec 30, 2018 at 9:38

answered Dec 30, 2018 at 8:22

Pixelomo

6,8354 gold badges49 silver badges62 bronze badges

Comments

Vadim Hulevich · Accepted Answer · 2018-12-30 07:36:54Z

-1

Try change your code, now it's like method:

handleOnClick(event){
    console.log("clicked")
}

answered Dec 30, 2018 at 7:36

Vadim Hulevich

1,83311 silver badges17 bronze badges

3 Comments

Cat_Enthusiast Over a year ago

That unfortunately did not have an effect. :(

Ahmad Maleki Over a year ago

@VadimHulevich You are right, it's discouraged to use arrow functions as class methods; but it doesn't prevent code from working. The codepen you supplied works fine with or without arrow function style.

Vadim Hulevich Over a year ago

can you give me codepen example and i will find what's wrong

Collectives™ on Stack Overflow

React. onClick event not firing

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related