Onclick function not firing

Question

I'm trying to show a list of button (PageLink) using React. A function(handleClick) will be called when any of the button is clicked. I'm passing this function as a callback from a parent component (Pagination). But the function isn't being called. Here is my code:

var PageLink = React.createClass({
    render: function() {
        return (
            <li>
                <button onclick={this.props.onPageClick}>{this.props.pageNumber}</button>
            </li>
        );
    }
});

var Pagination = React.createClass({
    render: function() {
        var pageLinks = [];
        for (var i = 1; i <= this.props.totalPages; i++) {
            pageLinks.push(<PageLink pageNumber={i} onPageClick={this.handleClick} key={i} />);
        }

        return (
            <nav>
                <ul className="pagination">
                    {pageLinks}
                </ul>
            </nav>
        );
    },

    handleClick: function() {
        alert('hello');
    }
});

Answer 1

Event handlers need to be camel cased. onclick should be onClick.