I need some help with understanding the so-called synthetic events in ReactJS. I wrote the following toy program that has a Video component and a VideoList component. When a video in the rendered list of videos is clicked, I would print out what video gets clicked in the console.

I don't understand how the event onVideoSelected() gets defined. Is it replaced by the onClick() event in the rendered Video component?

Thanks!

var Video = React.createClass({

  handleClick: function() {

    this.props.onVideoSelected(this.props.title);

  },



  render: function() {

    return <li><div onClick={this.handleClick} className=bg-success>{this.props.title}</div></li>;

  }



});



var VideoList = React.createClass({



  propTypes: {

    data: React.PropTypes.array.isRequired

  },



  handleVideoSelected: function(title) {

    console.log('selected Video title is: ' + title);

  },



  render: function() {



    return (

      <div className=panel panel-default><div className=panel-heading>List of Videos</div><ul>



        {data.map(function (v) {

          return <Video onVideoSelected={this.handleVideoSelected} key={v.title} title={v.title} />;

        },this)}



        </ul></div>

    );

  }

});



var data = [

  {title: 'video title 1', link: 'http://www.youtube.com/1'},

  {title: 'video title 2', link: 'http://www.youtube.com/2'},

  {title: 'video title 3', link: 'http://www.youtube.com/3'}

];



React.render(<VideoList data={data} />, document.getElementById('videolist'));