onClick on div element won't pass target id

Question

I have an issue in my React.js app with the target id not being passed if a onClick event is attached on a div element.

This is how I add the component:

<MenuOption title="Users" onOptionClick={this.onOptionClick}/>

This is the jsx-part of my MenuOption component:

<div id={title} className="row menu-option" onClick={onOptionClick}>
   <p>{title}</p>
</div>

As you can see I'm simply assigning the prop title as the id and the onClick event.

Back in the parent component, implementation of the onClick method:

  onSidebarOptionClick(e) {
    console.log(e.target.id);
  }

This does not seem to work since it always logs undefined.

However, if I add the id and the onClick event to my p element instead...

<div className="row menu-option">
   <p id={title} onClick={onOptionClick}>{title}</p>
</div>

...it works just as expected, the correct id logs at every click.

So why is not the id passed if the click event is attached to a div?

I`m using ES6 and babel.

I should clarify that I'm using "dumb" components, declaring them like this:

const MenuOption = ({title, onOptionClick})

...which is why don't need to use {this.props.title} when using it.

This doesn't look like a reactjs problem. Check this answer: http://stackoverflow.com/questions/2709994/javascript-getting-element-in-dom-tree-when-mouseover — OriolBG, Oct 22 '16 at 21:02

score 0 · Answer 1 · answered Oct 23 '16 at 05:31

Not sure as your Question missing constructor but try one of the following--

Method 1 (JSX):

<MenuOption title="Users" onOptionClick={this.onOptionClick.bind(this)}/>

Method 2 (es6):

   constructor(props) {
      super(props);
      this.onOptionClick = this.onOptionClick.bind(this);
   }

Method 3(es-next):

onSidebarOptionClick = (e) => {
    console.log(e.target.id);
 }

score 0 · Answer 2 · answered Oct 23 '16 at 06:02

As you're passing onOptionClick as a prop to <MenuOption/>, it should be declared as this.porops.onOptionClick.

<MenuOption/> should look like this

<div id={title} className="row menu-option" onClick={thi.props.onOptionClick}>
   <p>{title}</p>
</div>

Hope this helps!

2 Answers2