react.dev/docs/09.3-class-name-manipulation.md

id	title	layout	permalink	prev	next
class-name-manipulation	Class Name Manipulation	docs	class-name-manipulation.html	form-input-binding-sugar.html	examples.html

classSet() is a neat utility for easily manipulating the DOM class string.

Here's a common scenario and its solution without classSet():

// inside some `<Message />` React component
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>
}

This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. classSet() solves this problem:

render: function() {
  var classSet = React.addons.classSet;
  var classes = {
    'message': true,
    'message-important': this.props.isImportant,
    'message-read': this.props.isRead
  }
  // same final string, but much cleaner
  return <div className={classSet(classes)}>Great, I'll be there.</div>
}

Pass to classSet() an object, whose key is the CSS class name you might or might not need, and whose value is a boolean (or anything that converts to it) that indicates whether the key should be present in the final class string.

No more hacky string concatenations!