success to get html element with useRef

src/client/js/components/CustomNavigation.jsx

@@ -7,6 +7,7 @@ import {
 
 const CustomNavigation = (props) => {
   const [activeTab, setActiveTab] = useState(Object.keys(props.navTabMapping)[0]);
+  const elm = useRef(null);
   console.log(`customNavigation ${activeTab}`);
 
   const [defaultActiveTab, setDefaultActiveTab] = useState('');
@@ -24,62 +25,62 @@ const CustomNavigation = (props) => {
   const navBar = document.getElementById('grw-custom-navbar');
   const navTabs = document.querySelectorAll('ul.grw-custom-navbar > li.grw-custom-navtab');
 
-  const mounted = useRef(false);
+  // const mounted = useRef(false);
   useEffect(() => {
     console.log(`useEffecet ${activeTab}`);
     if (activeTab === '') {
       return;
     }
 
-    if (mounted.current) {
-      // Updated
-      setDefaultActiveTab('');
-      console.log('Updated!');
-
-      if (navBar == null || navTabs == null) {
-        console.log(`${navBar},${navTabs}`);
-        return;
-      }
-
-      let tempML = 0;
-
-      const styles = [].map.call(navTabs, (el) => {
-        const width = getPercentage(el.offsetWidth, navBar.offsetWidth);
-        const marginLeft = tempML;
-        tempML += width;
-        return { width, marginLeft };
-      });
-      const { width, marginLeft } = styles[props.navTabMapping[activeTab].index];
-
-      setSliderWidth(width);
-      setSliderMarginLeft(marginLeft);
-      console.log(`sliderWidth = ${sliderWidth}`);
-    }
-    else {
-      // Mounted
-      mounted.current = true;
-      console.log(`Mounted! ${activeTab}`);
-      setDefaultActiveTab(activeTab);
-      setSliderWidth(activeTab.offsetWidth);
+    // if (mounted.current) {
+    console.log(`elm = ${elm.current}`);
+    setDefaultActiveTab('');
+    console.log('Updated!');
+
+    if (navBar == null || navTabs == null) {
+      console.log(`${navBar},${navTabs}`);
+      return;
     }
 
+    let tempML = 0;
+
+    const styles = [].map.call(navTabs, (el) => {
+      const width = getPercentage(el.offsetWidth, navBar.offsetWidth);
+      const marginLeft = tempML;
+      tempML += width;
+      return { width, marginLeft };
+    });
+    const { width, marginLeft } = styles[props.navTabMapping[activeTab].index];
+
+    setSliderWidth(width);
+    setSliderMarginLeft(marginLeft);
+    console.log(`sliderWidth = ${sliderWidth}`);
+    // }
+    // else {
+    //   // Mounted
+    //   console.log(JSON.stringify(elm.current.getBoundingClientRect()));
+    //   mounted.current = true;
+    //   console.log(`Mounted! ${activeTab}`);
+    //   setDefaultActiveTab(activeTab);
+    //   setSliderWidth(activeTab.offsetWidth);
+    // }
+
   }, [activeTab]);
 
 
-  function renderNavSlideHr() {
-    if (defaultActiveTab === activeTab) {
-      console.log('1st');
-      console.log(`defaultActiveTab = ${defaultActiveTab}`);
-      return;
-    }
-    console.log('2nd');
-    return <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />;
-  }
+  // function renderNavSlideHr() {
+  //   if (defaultActiveTab === activeTab) {
+  //     console.log('1st');
+  //     console.log(`defaultActiveTab = ${defaultActiveTab}`);
+  //     return;
+  //   }
+  //   console.log('2nd');
+  //   return <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />;
+  // }
 
-  const elm = useRef(null);
   return (
     <React.Fragment>
-      <Nav ref={elm} className="nav-title grw-custom-navbar" id="grw-custom-navbar">
+      <Nav className="nav-title grw-custom-navbar" id="grw-custom-navbar">
         {Object.entries(props.navTabMapping).map(([key, value]) => {
           console.log('return');
           return (
@@ -96,7 +97,8 @@ const CustomNavigation = (props) => {
           );
         })}
       </Nav>
-      {renderNavSlideHr()}
+      {/* {renderNavSlideHr()} */}
+      <hr ref={elm} className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
       <TabContent activeTab={activeTab} className="p-4">
         {Object.entries(props.navTabMapping).map(([key, value]) => {
           return (