ReactJS: onClick handler not firing when placed on a child component

Question

I recently started working with ReactJS. Specifically, I am utilizing the react-rails ruby gem and react-bootstrap components.

Answer 1

So, the proper way to handle eventing in this case would be to pass the event handler down to the child component. There are a few ways to accomplish what you want, and I might implement this behavior differently (not sure what the use case is), but I wired up an example in JSX for you that demonstrates the typical event handling between Parent and Child Components. You can find it here...

JS Fiddle

Just think of it like this:

var ParentComponent = React.createClass({
    render: function(){
        return (
            ;
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

var ChildComponent = React.createClass({
    render: function(){
        return (
           
        )
    }
});