React.js, handling onMouseOver event

Question

being a noob in React I'm facing a problem: the component returns a simple nested table, so each cell of the 'big-table-id' contains another small table 'small-table-id'.

Thing is that every time the mouseover event occurs I'm always getting the 'small-cell-*' as target.id, even if the event handler is referenced in the parent (big) table. Is there any way to get the parent table kinda 'non-transparent' so that I could receive 'big-table-cell-1' or 'small-table-id'?

(using Rails with 'react-rails' gem)

var Tables = React.createClass({

handleMouseOver: function(e){
  console.log(e.target.id)
},

 render: function(){
 return (
   <table id='big-table-id' onMouseOver={this.handleMouseOver}>
    <tr>
     <td id='big-table-cell-1'>
      <table id='small-table-id'>
        <tr>
          <td id='small-cell-1>
            text 1
          </td>
          <td id='small-cell-2'>
            text 2
          </td>
        </tr>
      </table>
     </td>
    </tr>
   </table>
  )
 }
});

Answer 1

The DOM lets you select an elements child and parent nodes with methods like firstChild and parentElement. You should look into those.

Edit: also not sure if this would work but you could try wrapping the big table in a div and setting the callback there and seeing what it references.