Building React classNames with CoffeeScript

Maybe you're tired of building CSS classes from concatenated strings [[1]]:

render: function() {
 var classString = 'message';
 if (this.props.isImportant) {
 classString += ' message-important';
 }
 if (this.props.isRead) {
 classString += ' message-read';
 }
 // 'message message-important message-read'
 return <div className={classString}>Great, I'll be there.</div>;
}

With pure JavaScript, you could replace this logic with a library like classnames:

var classString = classNames({
 'message': true,
 'message-important': this.props.isImportant,
 'message-read': this.props.isRead
}); // => 'message ...'

But if you're using CoffeeScript, you can sugar things up with array conditionals—no libraries (even turnkey ones) required:

classString = [
 'message'
 'message-important' if @props.isImportant
 'message-read' if @props.isRead
].join(' ') # => 'message ...'

[1]: https://github.com/facebook/react/blob/9484d0fc39b301916ae3ae14913ca01fc42cf05b/docs/docs/10.3-class-name-manipulation.md