'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;
...
}
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 |