ReactJS component onClick not firing own function

I started this component with all the <th> hard coded in, but realized it would save me some time putting them in an array and calling it before render. But now the onClick event isn't firing.

I added in the <th id="category" onClick={this.handleClick}>test cat</th> to show that this still works. It seems that because the array I'm building is outside the return () it won't fire the onClick event.

Am I doing something wrong?

var Table = React.createClass({
    handleClick: function(sortid) {
        alert(sortid.target.id);
        this.props.sortClick(sortid.target.id);
    },
    render: function() {
        ...

        var columnDiv = this.props.columns.map(function(column, i) {
            return (
                <th id={column} key={i} onClick={this.handleClick}>
                    {column}
                </th>
            );
        });

        return (
            <table className="table table-hover">
                <thead>
                    <tr>
                        <th id="category" onClick={this.handleClick}>test cat</th>
                        {columnDiv}
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        );
    }
});