CSS – Show reusable props why they aren’t working

I had to use Boolean Hook Expression ie isMainPage. The logic is if mainPage is true then className is mainPageActive if not then it should be mainPage, but the main problem is that the prepositions that I put in the main component are showing me indefinitely. Please tell, whats the story of them big puppys …..

    const WebHeader = () => {
 
  const [threeDots, setThreeDots] = useState(false);
 


  console.log(threeDots);

  return (
    <>
      <Sidebar isSideBarShown={threeDots} />
 <div className="threeLine">
            <button
              class="menu"
              aria-label="Main Menu"
              onClick={() => setThreeDots(!threeDots)}
            >
              <svg width="30" height="30" viewBox="0 0 100 100">
                <path
                  className={threeDots ? "openedline1 line" : "line line1"}
                  d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"
                />
                <path
                  className={threeDots ? "openedline2 line" : "line line2"}
                  d="M 20,50 H 80"
                />
                <path
                  className={threeDots ? "openedline3 line " : "line line3"}
                  d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"
                />
              </svg>
            </button>
          </div>
     
      <Main isMainShown={threeDots} />
    </>
  );
};

export default WebHeader;

 

Here’s the key.

   const Main = (props, { isMainShown }) => {
  console.log(isMainShown);
  useEffect(() => {
    props.ImportForamttedFile();
  }, []);
return (
    <>
      <div className={isMainShown ? "mainPageActive" : "mainPage"}>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route exact path="/GrossProfitView">
            <GrossProfitView Sheet={props.Sheet} />
          </Route>
          <Route exact path="/data/augest-21/reports">
            <Report Sheet={props.Sheet} />
          </Route>
          <Route exact path="/Scorecard">
            <ScoreCard Sheet={props.Sheet} />
          </Route>
          <Route exact path="/Commisionview">
            <CommisionView />
          </Route>
          <Route exact path="/Activationview">
            <ActivationView />
          </Route>
          <Route exact path="/Accessoriesview">
            <Accessoriesview />
          </Route>
          <Route exact path="/TotalMobileProtection(TMP)View">
            <TotalMobileProtectionView />
          </Route>
          <Route exact path="/Notification/AllNotifications">
            <AllNotification />
          </Route>
        </Switch>
      </div>
    </>
  );
};

const mapStatetoProps = (state) => {
  return {
    Sheet: Object.values(state.Sheet),
  };
};

export default connect(mapStatetoProps, { ImportForamttedFile })(Main);

Leave a Reply

Your email address will not be published.