fix(jsx): prevent bootstrap from injecting props to react primitive

common/app/components/Nav/Nav.jsx

@@ -11,6 +11,7 @@ import {
 
 import navLinks from './links.json';
 import AvatarPointsNavItem from './Avatar-Points-Nav-Item.jsx';
+import NoPropsPassthrough from '../../utils/No-Props-Passthrough.jsx';
 
 const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
 
@@ -82,14 +83,16 @@ export default class extends React.Component {
   renderMapLink(isOnMap, toggleMapDrawer) {
     if (isOnMap) {
       return (
-        <li role='presentation'>
+        <NoPropsPassthrough>
-          <a
+          <li role='presentation'>
-            href='#'
+            <a
-            onClick={ this.handleMapClickOnMap }
+              href='#'
-            >
+              onClick={ this.handleMapClickOnMap }
-            Map
+              >
-          </a>
+              Map
-        </li>
+            </a>
+          </li>
+        </NoPropsPassthrough>
       );
     }
     return (

common/app/utils/No-Props-Passthrough.jsx

@@ -0,0 +1,12 @@
+import { PropTypes } from 'react';
+
+// use when passing a react primitive element as a child to a
+// react-boostrap component that will inject props
+// using cloneElement
+export default function NoPropsPassthrough({ children }) {
+  return children;
+}
+
+NoPropsPassthrough.propTypes = {
+  children: PropTypes.element
+};