Merge pull request #5035 from fedspendingtransparency/fix/dev-14177

DEV - 14177:  Remove use of DefaultProps in Spending Explorer

Author: jagu65

src/js/components/explorer/ExplorerWrapperPage.jsx

@@ -18,16 +18,15 @@ const propTypes = {
     showShareIcon: PropTypes.bool
 };
 
-const defaultProps = {
-    showShareIcon: false
-};
-
 require('pages/explorer/explorerPage.scss');
 
 const slug = 'explorer';
 const emailSubject = 'USAspending.gov Federal Spending Explorer';
 
-const ExplorerWrapperPage = (props) => {
+const ExplorerWrapperPage = ({
+    showShareIcon = false,
+    children
+}) => {
     const dispatch = useDispatch();
     const handleShareDispatch = (url) => {
         dispatch(showModal(url));
@@ -45,21 +44,20 @@ const ExplorerWrapperPage = (props) => {
             classNames="usa-da-explorer-page"
             title="Spending Explorer"
             metaTagProps={explorerPageMetaTags}
-            toolBarComponents={props.showShareIcon ? [
+            toolBarComponents={showShareIcon ? [
                 <ShareIcon
                     onShareOptionClick={handleShare}
                     url={getBaseUrl(slug)} />
             ] : []}>
             <main
                 id="main-content"
                 className="main-content">
-                {props.children}
+                {children}
             </main>
         </PageWrapper>
     );
 };
 
 ExplorerWrapperPage.propTypes = propTypes;
-ExplorerWrapperPage.defaultProps = defaultProps;
 
 export default ExplorerWrapperPage;

src/js/components/explorer/detail/ExplorerDetailPage.jsx

@@ -3,7 +3,7 @@
  * Created by Kevin Li 8/16/17
  */
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import DetailContentContainer from 'containers/explorer/detail/DetailContentContainer';
 import ExplorerWrapperPage from '../ExplorerWrapperPage';
 import ExplorerTooltip from './visualization/ExplorerTooltip';
@@ -22,14 +22,14 @@ const ExplorerDetailPage = () => {
         isAward: false
     });
 
-    const showTooltipFn = (position, data) => {
+    const showTooltipFn = useCallback((position, data) => {
         setShowTooltip(true);
         setTooltip(Object.assign({}, position, data));
-    };
+    }, []);
 
-    const hideTooltipFn = () => {
+    const hideTooltipFn = useCallback(() => {
         setShowTooltip(false);
-    };
+    }, []);
 
     let tooltipUi = null;