'I try to pass State of Parent to Child Component as Props

I what to show the hamburger button on the sidebar, as per parent state but I can't access it, i do follow the same steps on another project their it work but here it didn't

Parent Component

import React, { useState } from "react"; 

// Layout Related Components
import Sidebar from "./Sidebar";
import Footer from "./Footer";
import Header from "./Header";

const Layout = () => {
  const [sidebarActive, setSidebarActive] = useState(true);

  return (
    <React.Fragment>
      <div id="layout-wrapper">
        <div className={sidebarActive? " margin-left" : ""}>
          <Header />
        </div>

        <Sidebar
          isMobile={true}
          isOpen={setSidebarActive}
          isActive={sidebarActive}
        />

        <Footer />
      </div>
    </React.Fragment>
  );
};

export default Layout;

Child Component

import React, { useState } from "react";

const Sidebar = (props, { isOpen, isActive }) => {
return (
      {/* Hamburger button */}
      <button
        className={
          isActive
            ? "hamburgerButton sidebar-oepn"
            : "hamburgerButton sidebar-closed"
        }
        type="button"
        onClick={() => isOpen(!isActive)}
      >
        <i className="fa fa-fw fa-bars" />
      </button>
)
}
export default Sidebar;


Solution 1:[1]

Component props are available within the prop arg (1st argument), there aren't additional arguments for the function component:

const Sidebar = (props) => {
   const { isOpen, isActive } = props;
   ...
}

See component and props docs.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dennis Vash