This is what I would do. I'd be interested in hearing if there is a better approach.
var LoadingExample3 = React.createClass({
getInitialState: function () {
return {message: ""};
},
render: function () {
return (
<div>
<div>{this.state.message}</div>
<button onClick={this.doWork}>Solve</button>
</div>
)
},
doWork: function () {
this.setState({message: "Loading..."});
this.doWorkAsync();
},
doWorkAsync: function () {
var self = this;
setTimeout(function() {
for (var i = 0; i < 1000000000; i++) {
;
}
self.setState({message: "Done."});
}, 0); // timeout of 0 ms means "run at the end of the current event loop"
}
});
React.renderComponent(
<LoadingExample3 />,
document.getElementById("example1")
);