From c60838de084c61b8b6ec1e29a4b01b52cded41f6 Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Thu, 31 Oct 2013 21:10:19 -0400
Subject: [PATCH 1/3] split add-ons into subsections

In preparation for documenting `classSet` add-on.
---
 _config.yml                           |   5 +
 docs/09-addons.md                     | 202 +-------------------------
 docs/09.1-animation.md                |  99 +++++++++++++
 docs/09.2-form-input-binding-sugar.md | 113 ++++++++++++++
 4 files changed, 219 insertions(+), 200 deletions(-)
 create mode 100644 docs/09.1-animation.md
 create mode 100644 docs/09.2-form-input-binding-sugar.md

diff --git a/_config.yml b/_config.yml
index 7e26caf0..2ad77dcc 100644
--- a/_config.yml
+++ b/_config.yml
@@ -53,6 +53,11 @@ nav_docs_sections:
     title: Tooling Integration
   - id: addons
     title: Add-ons
+    subitems:
+    - id: animation
+      title: Animation
+    - id: form-input-binding-sugar
+      title: Form Input Binding Sugar
   - id: examples
     title: Examples
 - title: Reference
diff --git a/docs/09-addons.md b/docs/09-addons.md
index 30bacadc..26edf99f 100644
--- a/docs/09-addons.md
+++ b/docs/09-addons.md
@@ -4,207 +4,9 @@ title: Add-ons
 layout: docs
 permalink: addons.html
 prev: tooling-integration.html
-next: examples.html
+next: animation.html
 ---
 
 `React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library.
 
-## CSS Animation and Transitions
-
-`ReactTransitions` is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. `ReactTransitions` is inspired by the excellent [ng-animate](http://www.nganimate.org/) library.
-
-### Getting Started
-
-`ReactTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.
-
-```javascript{22-24}
-/** @jsx React.DOM */
-
-var ReactTransitionGroup = React.addons.TransitionGroup;
-
-var TodoList = React.createClass({
-  getInitialState: function() {
-    return {items: ['hello', 'world', 'click', 'me']};
-  },
-  handleAdd: function() {
-    var newItems =
-      this.state.items.concat([prompt('Enter some text')]);
-    this.setState({items: newItems});
-  },
-  handleRemove: function(i) {
-    var newItems = this.state.items;
-    newItems.splice(i, 1)
-    this.setState({items: newItems});
-  },
-  render: function() {
-    var items = this.state.items.map(function(item, i) {
-      return (
-        <div key={i} onClick={this.handleRemove.bind(this, i)}>
-          {item}
-        </div>
-      );
-    }.bind(this));
-    return (
-      <div>
-        <div><button onClick={this.handleAdd} /></div>
-        <ReactTransitionGroup transitionName="example">
-          {items}
-        </ReactTransitionGroup>
-      </div>
-    );
-  }
-});
-```
-
-In this component, when a new item is added `ReactTransitionGroup` it will get the `example-enter` CSS class and the `example-enter-active` CSS class added in the next tick. This is a convention based on the `transitionName` prop.
-
-You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:
-
-```css
-.example-enter {
-  opacity: 0.01;
-  transition: opacity .5s ease-in;
-}
-
-.example-enter.example-enter-active {
-  opacity: 0.99;
-}
-```
-
-You'll notice that when you try to remove an item `ReactTransitionGroup` keeps it in the DOM. If you're using an unminified build of React you'll see a warning that React was expecting an animation or transition to occur. That's because `ReactTransitionGroup` keeps your DOM elements on the page until the animation completes. Try adding this CSS:
-
-```css
-.example-leave {
-  opacity: 0.99;
-  transition: opacity .5s ease-in;
-}
-
-.example-leave.example-leave-active {
-  opacity: 0.01;
-}
-```
-
-### Disabling Animations
-
-You can disable animating `enter` or `leave` animations if you want. For example, sometimes you may want an `enter` animation and no `leave` animation, but `ReactTransitionGroup` waits for an animation to complete before removing your DOM node. You can add `transitionEnter={false}` or `transitionLeave={false}` props to `ReactTransitionGroup` to disable these animations.
-
-### Rendering a Different Component
-
-By default `ReactTransitionGroup` renders as a `span`. You can change this behavior by providing a `component` prop. For example, here's how you would render a `<ul>`:
-
-```javascript{3}
-<ReactTransitionGroup
-  transitionName="example"
-  component={React.DOM.ul}>
-  ...
-</ReactTransitionGroup>
-```
-
-`component` does not need to be a DOM component. It can be any component you want; even one you've written yourself!
-
-## ReactLink
-
-`ReactLink` is an easy way to express two-way binding with React.
-
-In React, data flows one way: from owner to child. This is because data only flows one direction in [the Von Neumann model of computing](http://en.wikipedia.org/wiki/Von_Neumann_architecture). You can think of it as "one-way data binding."
-
-However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React `state` when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.
-
-In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call `setState()` on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See [our forms documentation](./forms.html) for more information.
-
-Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React `state` -- is concise and supports a wide variety of applications. We've provided `ReactLink`: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React `state`.
-
-> Note:
->
-> ReactLink is just a thin wrapper and convention around the `onChange`/`setState()` pattern. It doesn't fundamentally change how data flows in your React application.
-
-### ReactLink: Before and After
-
-Here's a simple form example without using `ReactLink`:
-
-```javascript
-/** @jsx React.DOM */
-
-var NoLink = React.createClass({
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  handleChange: function(event) {
-    this.setState({value: event.target.value});
-  },
-  render: function() {
-    var value = this.state.value;
-    return <input type="text" value={value} onChange={this.handleChange} />;
-  }
-});
-```
-
-This works really well and it's very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let's use `ReactLink` to save us some typing:
-
-```javascript{4,9}
-/** @jsx React.DOM */
-
-var WithLink = React.createClass({
-  mixins: [React.addons.LinkedStateMixin],
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  render: function() {
-    return <input type="text" valueLink={this.linkState('value')} />;
-  }
-});
-```
-
-`LinkedStateMixin` adds a method ot your React component called `linkState()`. `linkState()` returns a `ReactLink` object which contains the current value of the React state and a callback to change it.
-
-`ReactLink` objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.
-
-### Under the Hood
-
-There are two sides to `ReactLink`: the place where you create the `ReactLink` instance and the place where you use it. To prove how simple `ReactLink` is, let's rewrite each side separately to be more explicit.
-
-#### ReactLink Without LinkedStateMixin
-
-```javascript{7-9,11-14}
-/** @jsx React.DOM */
-
-var WithoutMixin = React.createClass({
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  handleChange: function(newValue) {
-    this.setState({value: newValue});
-  },
-  render: function() {
-    var valueLink = {
-      value: this.state.value,
-      requestChange: this.handleChange
-    };
-    return <input type="text" valueLink={valueLink} />;
-  }
-});
-```
-
-As you can see, `ReactLink` objects are very simple objects that just have a `value` and `requestChange` prop. And `LinkedStateMixin` is similarly simple: it just populates those fields with a value from `this.state` and a callback that calls `this.setState()`.
-
-#### ReactLink Without valueLink
-
-```javascript
-/** @jsx React.DOM */
-
-var WithoutLink = React.createClass({
-  mixins: [React.addons.LinkedStateMixin],
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  render: function() {
-    var valueLink = this.linkState('value');
-    var handleChange = function(e) {
-      valueLink.requestChange(e.target.value);
-    };
-    return <input type="text" value={valueLink.value} onChange={handleChange} />;
-  }
-});
-```
-
-The `valueLink` prop is also quite simple. It simply handles the `onChange` event and calls `this.props.valueLink.requestChange()` and also uses `this.props.valueLink.value` instead of `this.props.value`. That's it!
+To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.
diff --git a/docs/09.1-animation.md b/docs/09.1-animation.md
new file mode 100644
index 00000000..3d83f1b6
--- /dev/null
+++ b/docs/09.1-animation.md
@@ -0,0 +1,99 @@
+---
+id: animation
+title: Animation
+layout: docs
+permalink: animation.html
+prev: addons.html
+next: form-input-binding-sugar.html
+---
+
+`ReactTransitions` is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent [ng-animate](http://www.nganimate.org/) library.
+
+## Getting Started
+
+`ReactTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.
+
+```javascript{22-24}
+/** @jsx React.DOM */
+
+var ReactTransitionGroup = React.addons.TransitionGroup;
+
+var TodoList = React.createClass({
+  getInitialState: function() {
+    return {items: ['hello', 'world', 'click', 'me']};
+  },
+  handleAdd: function() {
+    var newItems =
+      this.state.items.concat([prompt('Enter some text')]);
+    this.setState({items: newItems});
+  },
+  handleRemove: function(i) {
+    var newItems = this.state.items;
+    newItems.splice(i, 1)
+    this.setState({items: newItems});
+  },
+  render: function() {
+    var items = this.state.items.map(function(item, i) {
+      return (
+        <div key={i} onClick={this.handleRemove.bind(this, i)}>
+          {item}
+        </div>
+      );
+    }.bind(this));
+    return (
+      <div>
+        <div><button onClick={this.handleAdd} /></div>
+        <ReactTransitionGroup transitionName="example">
+          {items}
+        </ReactTransitionGroup>
+      </div>
+    );
+  }
+});
+```
+
+In this component, when a new item is added to `ReactTransitionGroup` it will get the `example-enter` CSS class and the `example-enter-active` CSS class added in the next tick. This is a convention based on the `transitionName` prop.
+
+You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:
+
+```css
+.example-enter {
+  opacity: 0.01;
+  transition: opacity .5s ease-in;
+}
+
+.example-enter.example-enter-active {
+  opacity: 0.99;
+}
+```
+
+You'll notice that when you try to remove an item `ReactTransitionGroup` keeps it in the DOM. If you're using an unminified build of React with add-ons you'll see a warning that React was expecting an animation or transition to occur. That's because `ReactTransitionGroup` keeps your DOM elements on the page until the animation completes. Try adding this CSS:
+
+```css
+.example-leave {
+  opacity: 0.99;
+  transition: opacity .5s ease-in;
+}
+
+.example-leave.example-leave-active {
+  opacity: 0.01;
+}
+```
+
+## Disabling Animations
+
+You can disable animating `enter` or `leave` animations if you want. For example, sometimes you may want an `enter` animation and no `leave` animation, but `ReactTransitionGroup` waits for an animation to complete before removing your DOM node. You can add `transitionEnter={false}` or `transitionLeave={false}` props to `ReactTransitionGroup` to disable these animations.
+
+## Rendering a Different Component
+
+By default `ReactTransitionGroup` renders as a `span`. You can change this behavior by providing a `component` prop. For example, here's how you would render a `<ul>`:
+
+```javascript{3}
+<ReactTransitionGroup
+  transitionName="example"
+  component={React.DOM.ul}>
+  ...
+</ReactTransitionGroup>
+```
+
+Every DOM component is under `React.DOM`. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself!
diff --git a/docs/09.2-form-input-binding-sugar.md b/docs/09.2-form-input-binding-sugar.md
new file mode 100644
index 00000000..730786a0
--- /dev/null
+++ b/docs/09.2-form-input-binding-sugar.md
@@ -0,0 +1,113 @@
+---
+id: form-input-binding-sugar
+title: Form Input Binding Sugar
+layout: docs
+permalink: form-input-binding-sugar.html
+prev: animation.html
+next: examples.html
+---
+
+`ReactLink` is an easy way to express two-way binding with React.
+
+In React, data flows one way: from owner to child. This is because data only flows one direction in [the Von Neumann model of computing](http://en.wikipedia.org/wiki/Von_Neumann_architecture). You can think of it as "one-way data binding."
+
+However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React `state` when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.
+
+In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call `setState()` on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See [our forms documentation](./forms.html) for more information.
+
+Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React `state` -- is concise and supports a wide variety of applications. We've provided `ReactLink`: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React `state`.
+
+> Note:
+>
+> ReactLink is just a thin wrapper and convention around the `onChange`/`setState()` pattern. It doesn't fundamentally change how data flows in your React application.
+
+## ReactLink: Before and After
+
+Here's a simple form example without using `ReactLink`:
+
+```javascript
+/** @jsx React.DOM */
+
+var NoLink = React.createClass({
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  handleChange: function(event) {
+    this.setState({value: event.target.value});
+  },
+  render: function() {
+    var value = this.state.value;
+    return <input type="text" value={value} onChange={this.handleChange} />;
+  }
+});
+```
+
+This works really well and it's very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let's use `ReactLink` to save us some typing:
+
+```javascript{4,9}
+/** @jsx React.DOM */
+
+var WithLink = React.createClass({
+  mixins: [React.addons.LinkedStateMixin],
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  render: function() {
+    return <input type="text" valueLink={this.linkState('value')} />;
+  }
+});
+```
+
+`LinkedStateMixin` adds a method ot your React component called `linkState()`. `linkState()` returns a `ReactLink` object which contains the current value of the React state and a callback to change it.
+
+`ReactLink` objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.
+
+## Under the Hood
+
+There are two sides to `ReactLink`: the place where you create the `ReactLink` instance and the place where you use it. To prove how simple `ReactLink` is, let's rewrite each side separately to be more explicit.
+
+### ReactLink Without LinkedStateMixin
+
+```javascript{7-9,11-14}
+/** @jsx React.DOM */
+
+var WithoutMixin = React.createClass({
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  handleChange: function(newValue) {
+    this.setState({value: newValue});
+  },
+  render: function() {
+    var valueLink = {
+      value: this.state.value,
+      requestChange: this.handleChange
+    };
+    return <input type="text" valueLink={valueLink} />;
+  }
+});
+```
+
+As you can see, `ReactLink` objects are very simple objects that just have a `value` and `requestChange` prop. And `LinkedStateMixin` is similarly simple: it just populates those fields with a value from `this.state` and a callback that calls `this.setState()`.
+
+### ReactLink Without valueLink
+
+```javascript
+/** @jsx React.DOM */
+
+var WithoutLink = React.createClass({
+  mixins: [React.addons.LinkedStateMixin],
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  render: function() {
+    var valueLink = this.linkState('value');
+    var handleChange = function(e) {
+      valueLink.requestChange(e.target.value);
+    };
+    return <input type="text" value={valueLink.value} onChange={handleChange} />;
+  }
+});
+```
+
+The `valueLink` prop is also quite simple. It simply handles the `onChange` event and calls `this.props.valueLink.requestChange()` and also uses `this.props.valueLink.value` instead of `this.props.value`. That's it!

From 87c91649f36caa125768a9332ba23dc6d6cf89c7 Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Thu, 31 Oct 2013 21:53:18 -0400
Subject: [PATCH 2/3] add docs on `classSet` add-on

---
 _config.yml                           |  2 ++
 docs/09.2-form-input-binding-sugar.md |  2 +-
 docs/09.3-class-name-manipulation.md  | 46 +++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 docs/09.3-class-name-manipulation.md

diff --git a/_config.yml b/_config.yml
index 2ad77dcc..88fc7643 100644
--- a/_config.yml
+++ b/_config.yml
@@ -58,6 +58,8 @@ nav_docs_sections:
       title: Animation
     - id: form-input-binding-sugar
       title: Form Input Binding Sugar
+    - id: class-name-manipulation
+      title: Class Name Manipulation
   - id: examples
     title: Examples
 - title: Reference
diff --git a/docs/09.2-form-input-binding-sugar.md b/docs/09.2-form-input-binding-sugar.md
index 730786a0..a1aa5998 100644
--- a/docs/09.2-form-input-binding-sugar.md
+++ b/docs/09.2-form-input-binding-sugar.md
@@ -4,7 +4,7 @@ title: Form Input Binding Sugar
 layout: docs
 permalink: form-input-binding-sugar.html
 prev: animation.html
-next: examples.html
+next: class-name-manipulation.html
 ---
 
 `ReactLink` is an easy way to express two-way binding with React.
diff --git a/docs/09.3-class-name-manipulation.md b/docs/09.3-class-name-manipulation.md
new file mode 100644
index 00000000..4e5ca0bd
--- /dev/null
+++ b/docs/09.3-class-name-manipulation.md
@@ -0,0 +1,46 @@
+---
+id: class-name-manipulation
+title: Class Name Manipulation
+layout: docs
+permalink: class-name-manipulation.html
+prev: form-input-binding-sugar.html
+next: examples.html
+---
+
+`classSet()` is a neat utility for easily manipulating the DOM `class` string.
+
+Here's a common scenario and its solution without `classSet()`:
+
+```javascript
+// 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:
+
+```javascript
+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!

From 12d16c92d87b4c7a4a72c2928fa7653b91e8ba17 Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Fri, 1 Nov 2013 17:12:45 -0400
Subject: [PATCH 3/3] update add-ons docs based on feedbacks

- Overview of add-ons for the add-ons page.
- Better title for `ReactLink`.
- Nicer code format for classSet example.
- Better explanation for `classSet`.
---
 _config.yml                           |  6 +++---
 docs/09-addons.md                     |  6 +++++-
 docs/09.1-animation.md                |  2 +-
 docs/09.2-form-input-binding-sugar.md | 12 ++++++++----
 docs/09.3-class-name-manipulation.md  | 12 ++++++------
 5 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/_config.yml b/_config.yml
index 88fc7643..ef61c5de 100644
--- a/_config.yml
+++ b/_config.yml
@@ -52,12 +52,12 @@ nav_docs_sections:
   - id: tooling-integration
     title: Tooling Integration
   - id: addons
-    title: Add-ons
+    title: Add-Ons
     subitems:
     - id: animation
       title: Animation
-    - id: form-input-binding-sugar
-      title: Form Input Binding Sugar
+    - id: two-way-binding-helpers
+      title: Two-Way Binding Helpers
     - id: class-name-manipulation
       title: Class Name Manipulation
   - id: examples
diff --git a/docs/09-addons.md b/docs/09-addons.md
index 26edf99f..e1181ab0 100644
--- a/docs/09-addons.md
+++ b/docs/09-addons.md
@@ -7,6 +7,10 @@ prev: tooling-integration.html
 next: animation.html
 ---
 
-`React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library.
+`React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library:
+
+- `ReactTransitions`, for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
+- `ReactLink`, to simplify the coordination between user's form input data and and the component's state.
+- `classSet`, for manipulating the DOM `class` string a bit more cleanly.
 
 To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.
diff --git a/docs/09.1-animation.md b/docs/09.1-animation.md
index 3d83f1b6..ad714fdf 100644
--- a/docs/09.1-animation.md
+++ b/docs/09.1-animation.md
@@ -4,7 +4,7 @@ title: Animation
 layout: docs
 permalink: animation.html
 prev: addons.html
-next: form-input-binding-sugar.html
+next: two-way-binding-helpers.html
 ---
 
 `ReactTransitions` is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent [ng-animate](http://www.nganimate.org/) library.
diff --git a/docs/09.2-form-input-binding-sugar.md b/docs/09.2-form-input-binding-sugar.md
index a1aa5998..a11edc07 100644
--- a/docs/09.2-form-input-binding-sugar.md
+++ b/docs/09.2-form-input-binding-sugar.md
@@ -1,13 +1,17 @@
 ---
-id: form-input-binding-sugar
-title: Form Input Binding Sugar
+id: two-way-binding-helpers
+title: Two-Way Binding Helpers
 layout: docs
-permalink: form-input-binding-sugar.html
+permalink: two-way-binding-helpers.html
 prev: animation.html
 next: class-name-manipulation.html
 ---
 
-`ReactLink` is an easy way to express two-way binding with React.
+`ReactLink` is an easy way to express two-way binding with React. 
+
+> Note:
+>
+> If you're new to the framework, note that `ReactLink` is not needed for most applications and should be used cautiously.
 
 In React, data flows one way: from owner to child. This is because data only flows one direction in [the Von Neumann model of computing](http://en.wikipedia.org/wiki/Von_Neumann_architecture). You can think of it as "one-way data binding."
 
diff --git a/docs/09.3-class-name-manipulation.md b/docs/09.3-class-name-manipulation.md
index 4e5ca0bd..2cc91b04 100644
--- a/docs/09.3-class-name-manipulation.md
+++ b/docs/09.3-class-name-manipulation.md
@@ -3,7 +3,7 @@ id: class-name-manipulation
 title: Class Name Manipulation
 layout: docs
 permalink: class-name-manipulation.html
-prev: form-input-binding-sugar.html
+prev: two-way-binding-helpers.html
 next: examples.html
 ---
 
@@ -30,17 +30,17 @@ This can quickly get tedious, as assigning class name strings can be hard to rea
 
 ```javascript
 render: function() {
-  var classSet = React.addons.classSet;
-  var classes = {
+  var cx = React.addons.classSet;
+  var classes = cx({
     '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>
+  return <div className={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.
+When using `classSet()`, pass an object with keys of the CSS class names you might or might not need. Truthy values will result in the key being a part of the resulting string.
 
 No more hacky string concatenations!