In my navbar, I have a button that will display a submenu (list of items) when clicked. Each item is their own child ponent 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 ponent: 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 ponent.

                <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>

In my navbar, I have a button that will display a submenu (list of items) when clicked. Each item is their own child ponent 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 ponent: 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 ponent.

                <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>

• javascript
• reactjs

Share Improve this question Follow edited Dec 30, 2018 at 8:20 Cat_Enthusiast asked Dec 30, 2018 at 7:32 Cat_EnthusiastCat_Enthusiast 15.7k55 gold badges2525 silver badges4646 bronze badges 7

• 1 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 Commented Dec 30, 2018 at 7:41
• @Herohtar. I tried without the binding, didn't have an effect either. – Cat_Enthusiast Commented Dec 30, 2018 at 7:45
• You are missing a closing brace } at the end of NotificationItem ponent. Not sure if it's a copy paste problem or it's also missing in your source code. – 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 Commented Dec 30, 2018 at 8:04
• 1 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 Commented Dec 30, 2018 at 9:26

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 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!

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

try this

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

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

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