Update

client/coral-admin/src/routes/Community/components/Table.js

@@ -35,8 +35,8 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
               label={capitalize(row.status)}
               placeholder={t('community.status')}
               onChange={(status) => onCommenterStatusChange(row.id, status)}>     
-              <Option value={'ACTIVE'}>{t('community.active')}</Option>
-              <Option value={'BANNED'}>{t('community.banned')}</Option>
+              <Option value={'ACTIVE'} label={t('community.active')} />
+              <Option value={'BANNED'} label={t('community.banned')} />
             </Dropdown>       
           </td>
           <td className="mdl-data-table__cell--non-numeric">
@@ -45,10 +45,10 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
               label={capitalize(row.roles[0]) || t('community.none')}
               placeholder={t('community.role')}
               onChange={(role) => onRoleChange(row.id, role)}>
-              <Option value={''}>{t('community.none')}</Option>
-              <Option value={'STAFF'}>{t('community.staff')}</Option>
-              <Option value={'MODERATOR'}>{t('community.moderator')}</Option>
-              <Option value={'ADMIN'}>{t('community.admin')}</Option>
+              <Option value={''} label={t('community.none')} />
+              <Option value={'STAFF'} label={t('community.staff')} />
+              <Option value={'MODERATOR'} label={t('community.moderator')} />
+              <Option value={'ADMIN'} label={t('community.admin')} />
             </Dropdown>
           </td>
         </tr>

client/coral-admin/src/routes/Stories/components/Stories.js

@@ -69,8 +69,8 @@ class Stories extends Component {
         value={closed}
         label={closed ? t('streams.closed') : t('streams.open')}
         onChange={(value) => this.onStatusClick(!value, id)}>     
-        <Option value={null}>{t('streams.closed')}</Option>
-        <Option value={true}>{t('streams.open')}</Option>
+        <Option value={null} label={t('streams.closed')} />
+        <Option value={true} label={t('streams.open')} />
       </Dropdown> 
     );
   }

client/coral-ui/components/Dropdown.js

@@ -7,29 +7,22 @@ import ClickOutside from 'coral-framework/components/ClickOutside';
 
 class Dropdown extends React.Component {
 
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
+
     this.state = {
       isOpen: false
     };
   }
-
-  fireChange = (newState) => {
-    if (this.props.onChange) {
-      this.props.onChange(newState.selected.value);
-    }
-  }
   
   setValue = (value, label) => {
-    const newState = {
-      selected: {
-        label: label,
-        value: value
-      },
+    if (this.props.onChange) {
+      this.props.onChange(value, label);
+    }
+
+    this.setState({
       isOpen: false
-    };
-    this.fireChange(newState);
-    this.setState(newState);
+    });
   }
 
   handleClick = () => {
@@ -66,7 +59,7 @@ class Dropdown extends React.Component {
               .map((child) =>
                 React.cloneElement(child, {
                   key: child.props.value,
-                  onClick: () => this.setValue(child.props.value, child.props.children)
+                  onClick: () => this.setValue(child.props.value, child.props.label)
                 }))}
           </ul>
         </div>

client/coral-ui/components/Option.js

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import styles from './Option.css';
 import cn from 'classnames';
 
-const Option = ({className, children, onClick}) => (
+const Option = ({className, label = '', onClick}) => (
   <li className={cn(styles.option, className)} onClick={onClick}>
-    {children || ''}
+    {label}
   </li>
 );
 
 Option.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.string,
+  label: PropTypes.string,
   onClick: PropTypes.func,
   value: PropTypes.oneOfType([
     PropTypes.number,