ReactJS sorting column with dynamic class creation - reactjs

Question

I've inherited a large pile of code and it generally works. This is running on v0.13.3.
The problem I am having is in sorting columns. Whenever I invoke the handler for the click event below, I am getting a null this.state. I must be missing something simple because I have done a lot of stare/compare vs other working code and I just don't see it but this example component is hassling me.
I've simplified down to just the problem component as a standalone html file with static sample data:
<div id="content">Loading ...</div>
<script>
var theData = [{"id":"47483648","labName":"Lab0"},{"id":"47483650","labName":"Lab1"},{"id":"47483651","labName":"Lab2"},{"id":"47483654","labName":"Lab3"}];
function render() {
React.render(React.createElement(aTable, {data: theData}),document.getElementById("content"));
}
var aTable = React.createClass({displayName: "aTable",
handleHeaderClick: function(sortBy) {
console.log("firing aTable handleHeaderClick");
//this.state is null here
var newState = this.state;
if (this.state.sortBy === sortBy && this.state.sortOrder === 'asc') {
newState.sortOrder = 'desc';
}
else {
newState.sortOrder ='asc';
}
newState.sortBy = sortBy;
this.setState(newState);
},
render: function(){
var theItems = $.map(this.props.data, function (key, value) {
console.log("the items", key);
return (
React.createElement("tr",{key: key.id + "-row"},
React.createElement("td", {key: key.agentid}, key.id),
React.createElement("td", {key: key.labName}, key.labName),
)
);
});
return (
React.createElement("div", {id: "holder"},
React.createElement("div", {id: "a-table"},
React.createElement("table",null,
React.createElement("thead",null,
React.createElement("tr",null,
React.createElement("th",null," The ID"),
React.createElement("th",
{onClick: this.handleHeaderClick.bind(this, "labName")},
"Lab Name")
)
),
React.createElement("tbody",null,
theItems
)
)
)
)
);
}
});
$(document).ready(function () {
render();
});
This throws up an exception on the null state:
basic.html:37 Uncaught TypeError: Cannot read property 'sortBy' of null
Which refers to this line:
if (this.state.sortBy === sortBy && this.state.sortOrder === 'asc') {
I have latitude to change the handler logic, but am stuck with this pattern for the time being.
Thanks in advance.
EDIT 1
This is a working fiddle where I worked out the sorting by doing a field sort on the data array after Sy pointed out where I was missing the initial state: working fiddle

Answer 1

state is null because you didn't set an initial value.
Test = React.createClass({
getInitialState: function() {
return {};
}
})
this is equivalent to
class Test extends Component {
constructor(props) {
this.state = {}
}
}