OnClick event does not fire React component

Question

I am working on a component stub where I have a grid of tiles, each of which requires a click handler, as well as a specific “new” tile that has a different click handler. I am trying to correctly process click handlers, but the event never fires.

Any ideas?

var grid = React.createClass({
    onCreateNew: function () {
        console.log("onCreateNew");
    },
    render: function () {
        var tiles = [];
        if (this.props.items) {
            tiles = this.props.items.map(function (item, index) {
                //create a tile for each item
            });
        }
        //always append "new" tile for the last one
        tiles.push(React.DOM.div({
            onClick: this.onCreateNew, className: "tile new_tile"
        },
            React.DOM.div({ className: "plus", onClick: this.onCreateNew }, "+")
        ));            
        return React.DOM.div({ id: "flowsheetPane" }, tiles);
    }
});

Answer 1

As commentators have already noted, your code works as expected in isolation.

Delegates respond to event handlers with a single event listener in the root of the DOM, so events must propagate to the end so that React calls your function.

- , event.stopPropagation()? React (, jquery), , DOM, React .