Why the reusable props is not working and show undefined

Question

I had to use the boolean hook expression i.e isMainPage. The logic is if isMainPage is true then the className is mainPageActive if not then it should be mainPage, But the main problem is the props that I had put in the main component are showing me undefined. Please tell me if I m doing it wrong.

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 is the Main Component

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);

Answer 1

You can access props this way.

const Main = (props) => {
 const { isMainShown } = props;
}