anchor tag (a tag) onclick event handler not working

Question

Though i have included the onclick handler for the a tag in the html returned by the render method of the reactjs component(component with the name renderLocationLink) , though the rendering takes place correctly the onclick handler attribute doesnt appear in the rendered html on the webpage .I want the Not able to figure whats the issue , here is the code

var feedApp = React.createClass({
      getInitialState: function(){
        return {
          data : [
           {display_name:"Rao",content:"this is Rao post",links:['link1','link2','link3']},
           {display_name:"Sultan",content:"this is Sultans",links:['link4','link5','link6']},
           {display_name:"John",content:"this is John post",links:['link7','link8','link9']}
          ]
        }
      },
      fetchFeedsFromUrl: function(){
        console.log('Onclick triggered');
      },
      render: function(){
        return (<Feeds data={this.state.data} onClick={this.fetchFeedsFromUrl} />)
      }
})

var Feeds = React.createClass({

    render: function(){
      var onClickfunc = this.props.onClick; 
      var feeds = this.props.data.map(function(feed){
        return (
          <oneFeed  name={feed.display_name}  onClick={this.onClickfunc} content={feed.content}  links={feed.links} />
        )
      });
    return( 
      <div> {feeds} </div>  
    )
  }
})


var oneFeed = React.createClass({
      render: function() {
        return (
         <div> 
          <h3>{this.props.name}</h3>
          <renderLocationLink  onClick={this.props.onClick}  linkArray={this.props.links}  />
          <p>{this.props.content} </p>
         </div> 
        )
      }
    });


var renderLocationLink = React.createClass({

  render: function(){
    var onClick = this.props.onClick;
    var locationLinks = this.props.linkArray.map(function(link,index){
        return (<a onClick={this.onClick} href={link}>{link}   </a>)
    })

   return ( <div >{locationLinks}</div> )

  }
})

React.renderComponent(feedApp(null),document.body); 

Answer 1

Your rendered markup will not contain an onClick attribute. What you write in your JSX markup is not a direct HTML markup.

What will happen instead is that React will give your markup a data-reactid attribute, and will make sure its own event handlers fire something when a specific data-reactid gets clicked.

Answer 2

You do not need to reference "this" in your map functions to access your local variable. Remove "this" when you try to access the onClick variable.

var renderLocationLink = React.createClass({

  render: function(){
    var onClick = this.props.onClick;
    var locationLinks = this.props.linkArray.map(function(link,index){
        return (<a onClick={onClick} href={link}>{link}   </a>)
    })

   return ( <div >{locationLinks}</div> )

  }
})