diff --git a/webapp/components/setting_item_max.jsx b/webapp/components/setting_item_max.jsx
index 2da5003947c..2e7be779afa 100644
--- a/webapp/components/setting_item_max.jsx
+++ b/webapp/components/setting_item_max.jsx
@@ -87,8 +87,10 @@ export default class SettingItemMax extends React.Component {
         }
 
         let title;
+        let titleProp = 'unknownTitle';
         if (this.props.title) {
             title = <li className='col-sm-12 section-title'>{this.props.title}</li>;
+            titleProp = this.props.title;
         }
 
         return (
@@ -107,7 +109,7 @@ export default class SettingItemMax extends React.Component {
                             {clientError}
                             {submit}
                             <a
-                                id={Utils.createSafeId(this.props.title.toString() + 'Cancel')}
+                                id={Utils.createSafeId(titleProp) + 'Cancel'}
                                 className='btn btn-sm'
                                 href='#'
                                 onClick={this.props.updateSection}
diff --git a/webapp/components/setting_item_min.jsx b/webapp/components/setting_item_min.jsx
index da86ed4a7fb..03c4da53762 100644
--- a/webapp/components/setting_item_min.jsx
+++ b/webapp/components/setting_item_min.jsx
@@ -13,7 +13,7 @@ export default class SettingItemMin extends React.Component {
             editButton = (
                 <li className='col-xs-12 col-sm-3 section-edit'>
                     <a
-                        id={Utils.createSafeId(this.props.title.toString() + 'Edit')}
+                        id={Utils.createSafeId(this.props.title) + 'Edit'}
                         className='theme'
                         href='#'
                         onClick={this.props.updateSection}
@@ -36,7 +36,7 @@ export default class SettingItemMin extends React.Component {
                 <li className='col-xs-12 col-sm-9 section-title'>{this.props.title}</li>
                 {editButton}
                 <li
-                    id={Utils.createSafeId(this.props.title.toString() + 'Desc')}
+                    id={Utils.createSafeId(this.props.title) + 'Desc'}
                     className='col-xs-12 section-describe'
                 >
                     {this.props.describe}
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 16e20840964..3bf87778124 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -31,11 +31,19 @@ export function isMac() {
     return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 }
 
-export function createSafeId(str) {
-    if (str === null) {
+export function createSafeId(prop) {
+    if (prop === null) {
         return null;
     }
 
+    var str = '';
+
+    if (prop.props && prop.props.defaultMessage) {
+        str = prop.props.defaultMessage;
+    } else {
+        str = prop.toString();
+    }
+
     return str.replace(new RegExp(' ', 'g'), '_');
 }