change useState position

src/client/js/components/CustomNavigation.jsx

@@ -7,6 +7,8 @@ import {
 
 const CustomNavigation = (props) => {
   const [activeTab, setActiveTab] = useState(Object.keys(props.navTabMapping)[0]);
+  const [sliderWidth, setSliderWidth] = useState(100);
+  const [sliderMarginLeft, setSliderMarginLeft] = useState(0);
   const refs = {};
 
   Object.keys(props.navTabMapping).forEach((key) => {
@@ -15,8 +17,6 @@ const CustomNavigation = (props) => {
 
   console.log(`customNavigation ${activeTab}`);
 
-  const [sliderWidth, setSliderWidth] = useState(null);
-  const [sliderMarginLeft, setSliderMarginLeft] = useState(0);
 
   function switchActiveTab(activeTab) {
     setActiveTab(activeTab);
@@ -26,49 +26,47 @@ const CustomNavigation = (props) => {
   function getPercentage(min, max) {
     return min / max * 100;
   }
+
   const navBar = document.getElementById('grw-custom-navbar');
   const navTabs = document.querySelectorAll('ul.grw-custom-navbar > li.grw-custom-navtab');
 
-  JSON.stringify(refs);
-  // console.log(`stringifyRefs : ${stringifyRefs}`);
-  console.log('ref', refs);
-
   useEffect(() => {
     console.log(`useEffecet ${activeTab}`);
+    console.log('reffff', refs);
+
     if (activeTab === '') {
       return;
     }
 
-    // setDefaultActiveTab('');
+    //   // setDefaultActiveTab('');
 
     if (navBar == null || navTabs == null) {
       console.log(`${navBar},${navTabs}`);
+      setSliderWidth(5);
       return;
     }
 
-    let tempML = 0;
+    // const 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];
+    //   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}`);
+    //   setSliderWidth(width);
+    //   setSliderMarginLeft(marginLeft);
+    //   console.log(`sliderWidth = ${sliderWidth}`);
 
   }, [activeTab]);
 
-
   return (
     <React.Fragment>
       <Nav className="nav-title grw-custom-navbar" id="grw-custom-navbar">
         {Object.entries(props.navTabMapping).map(([key, value]) => {
           console.log(`key = ${key}, value = ${value.index}`);
-          // console.log(`refs.current[key] = ${refs.current[key]}`); // undefined
           return (
             <NavItem
 
@@ -86,6 +84,7 @@ const CustomNavigation = (props) => {
       </Nav>
       {/* {renderNavSlideHr()} */}
       <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
+      {/* <hr 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 (