React get id value on click

Question

I have the following:

    var SingleEditableModule = React.createClass({
        show_overlay: function(e) {
            console.log($(e.target).attr('id'));
        },
        render: function() {
            var show_overlay = this.show_overlay;
            return (
                <div className="large-4 small-12 columns">
                    <h3 className="title">{this.props.data.title}</h3>
                    <div className="month">
                        <p>
                            {this.props.data.month}
                        </p>
                    </div>
                    <div className="img-holder">
                        <div 
                            id={this.props.data.id} 
                            onClick={show_overlay} 
                            className="action_wrapper">
                                <span className="swap_trigger"></span>
                                <span className="action">
                                    {this.props.data.action}
                                </span>
                        </div>
                    </div>
                    <h4>{this.props.data.title_description}</h4>
                    <p>{this.props.data.description}</p>
                </div>
            );
        }
    });

when I click on "action_wrapper" to retrieve the id value I get undefined. I should get either 'D' or 'E' as per my data structure:

var empty_modules_DE = [
    {
        id: 'D',
        title: 'Module D',
        title_description: 'Your first rotation',
        description: 'In your penultimate module, Module D, you have the option of taking electives and spending six weeks at any of Hult’s home campuses, or our rotation centers in Shanghai and New York. You can choose to stay for the next module and extend your stay to twelve weeks if you prefer to only rotate once.',
        action: 'click to choose a campus',
        month: 'june'
    },
    {
        id: 'E',
        title: 'Module E',
        title_description: 'Where to next?',
        description: 'For your final module, Module E, you can choose to take electives and spend six weeks at any of Hult’s seven campuses worldwide. That includes all five of our home campuses, and our rotation centers in Shanghai, New York, and Ashridge Estate, U.K.',
        action: 'click to choose a campus',
        month: 'june'
    }

];

Answer 1

you can simply bind your method action_wrapper

 var SingleEditableModule = React.createClass({
        show_overlay: function(id) {
           //your id is here
        },
        render: function() {
            var show_overlay = this.show_overlay;
            return (
                <div className="large-4 small-12 columns">
                    <h3 className="title">{this.props.data.title}</h3>
                    <div className="month">
                        <p>
                            {this.props.data.month}
                        </p>
                    </div>
                    <div className="img-holder">
                        <div 
                            id={this.props.data.id} 
                            onClick={this.show_overlay.bind(this,this.props.data.id)} 
                            className="action_wrapper">
                                <span className="swap_trigger"></span>
                                <span className="action">
                                    {this.props.data.action}
                                </span>
                        </div>
                    </div>
                    <h4>{this.props.data.title_description}</h4>
                    <p>{this.props.data.description}</p>
                </div>
            );
        }
    });

Answer 2

I think you only need to bind this of ReactComponent to your function. Currently your e is undefined. Try this :

...
  onClick={this.show_ovelay.bind(this)}
...

Answer 3

1) Since you use React.createClass, and not es6 class, Therefore React does autobinding for you

you just need to add this. before func:

 onClick={this.show_overlay} 

2) You don't need to use jquery, because in your particular case, you can get id from this.props.data.id

 show_overlay: function() {
      console.log(this.props.data.id);
 },

3) There are cases when you don't have id in props, and you want to pass some arg to function, then you can use bind

 onClick={this.show_overlay.bind(null,"someValue")}

and then in callback

 show_overlay: function(someValue) {
      console.log(someValue);
 },

example with passing args jsfiddle