diff --git a/docs/src/app/components/pages/components/Toolbar/ExampleSimple.jsx b/docs/src/app/components/pages/components/Toolbar/ExampleSimple.jsx
index a5a2dcf235b476..dff2a85f21030f 100644
--- a/docs/src/app/components/pages/components/Toolbar/ExampleSimple.jsx
+++ b/docs/src/app/components/pages/components/Toolbar/ExampleSimple.jsx
@@ -11,36 +11,48 @@ import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group';
 import ToolbarSeparator from 'material-ui/lib/toolbar/toolbar-separator';
 import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title';
 
-const ToolbarExamplesSimple = () => (
-  <Toolbar>
-    <ToolbarGroup firstChild={true} float="left">
-      <DropDownMenu value={3}>
-        <MenuItem value={1} primaryText="All Broadcasts" />
-        <MenuItem value={2} primaryText="All Voice" />
-        <MenuItem value={3} primaryText="All Text" />
-        <MenuItem value={4} primaryText="Complete Voice" />
-        <MenuItem value={5} primaryText="Complete Text" />
-        <MenuItem value={6} primaryText="Active Voice" />
-        <MenuItem value={7} primaryText="Active Text" />
-      </DropDownMenu>
-    </ToolbarGroup>
-    <ToolbarGroup float="right">
-      <ToolbarTitle text="Options" />
-      <FontIcon className="muidocs-icon-custom-sort" />
-      <IconMenu
-        iconButtonElement={
-          <IconButton touch={true}>
-            <NavigationExpandMoreIcon />
-          </IconButton>
-        }
-      >
-        <MenuItem primaryText="Download" />
-        <MenuItem primaryText="More Info" />
-      </IconMenu>
-      <ToolbarSeparator />
-      <RaisedButton label="Create Broadcast" primary={true} />
-    </ToolbarGroup>
-  </Toolbar>
-);
+export default class ToolbarExamplesSimple extends React.Component {
 
-export default ToolbarExamplesSimple;
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 3,
+    };
+  }
+
+  handleChange = (event, index, value) => this.setState({value});
+
+  render() {
+    return (
+      <Toolbar>
+        <ToolbarGroup firstChild={true} float="left">
+          <DropDownMenu value={this.state.value} onChange={this.handleChange}>
+            <MenuItem value={1} primaryText="All Broadcasts" />
+            <MenuItem value={2} primaryText="All Voice" />
+            <MenuItem value={3} primaryText="All Text" />
+            <MenuItem value={4} primaryText="Complete Voice" />
+            <MenuItem value={5} primaryText="Complete Text" />
+            <MenuItem value={6} primaryText="Active Voice" />
+            <MenuItem value={7} primaryText="Active Text" />
+          </DropDownMenu>
+        </ToolbarGroup>
+        <ToolbarGroup float="right">
+          <ToolbarTitle text="Options" />
+          <FontIcon className="muidocs-icon-custom-sort" />
+          <IconMenu
+            iconButtonElement={
+              <IconButton touch={true}>
+                <NavigationExpandMoreIcon />
+              </IconButton>
+            }
+          >
+            <MenuItem primaryText="Download" />
+            <MenuItem primaryText="More Info" />
+          </IconMenu>
+          <ToolbarSeparator />
+          <RaisedButton label="Create Broadcast" primary={true} />
+        </ToolbarGroup>
+      </Toolbar>
+    );
+  }
+}