Fix sectionName and menuItemName to display with spaces rather then dashes

2 files changed, 5 insertions, 3 deletions

diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index d24a43dcb..e895afd2a 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -43,6 +43,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
         const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
 
         const id = utils.getIdFromName(sectionName);
+        const finalSectionName = sectionName.replace(/-/g, ' ');
         return (
             <div
                 className="md-px1 sm-px2 overflow-hidden"
@@ -55,7 +56,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                             <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
                                 <AnchorTitle
                                     headerSize={headerSize}
-                                    title={sectionName}
+                                    title={finalSectionName}
                                     id={id}
                                     shouldShowAnchor={this.state.shouldShowAnchor}
                                 />
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index c4c87401a..d81bd3c3d 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -85,6 +85,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
             : styles.menuItemWithoutHeaders;
         const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
         const menuItems = _.map(menuItemNames, menuItemName => {
+            const finalMenuItemName = menuItemName.replace(/-/g, ' ');
             const id = utils.getIdFromName(menuItemName);
             return (
                 <div key={menuItemName}>
@@ -96,11 +97,11 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                         containerId={constants.DOCS_CONTAINER_ID}
                     >
                         <MenuItem
-                            onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
+                            onTouchTap={this._onMenuItemClick.bind(this, finalMenuItemName)}
                             style={menuItemStyles}
                             innerDivStyle={menuItemInnerDivStyles}
                         >
-                            <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span>
+                            <span style={{ textTransform: 'capitalize' }}>{finalMenuItemName}</span>
                         </MenuItem>
                     </ScrollLink>
                     {this._renderMenuItemSubsections(menuItemName)}