React component does not call onClick handler

Question

I have a component built with es6 class syntax. It's a simple component with just a diverse and some styling. Then, on the parent component (called app), I'd like to render that component and give it an onClick that calls the parent's onclick handler. So far, the parent renders the child like so:

<child_component onClick={this.clickhandler}>

And then I have a method in that parent component that I have bound to the parent's context in the constructor.

The component renders, but the click handler is never called when I click the component. Any idea why?

Answer 1

Since child componet isn't a native DOM element but, another React component, onClick as defined here is simply a property of that component. What you need to do is, inside of the child component pass the onClick prop to an DOM component's onClick event:

var ChildComponet= React.createClass({
 render: function() {
 return (
   <div className="childcomponent" onClick={this.props.onClick}>
   ...
    </div>
  );
 }
 });