I have 2 files, Header and App. App is my parent file and header is the child. I have designed a button in the header to open and close the sidebar, but I am unable to do that. My question is how to pass the state value from the header to the App file. Here's the code
import Header from 'components/Header';
import FirstSection from 'components/FirstSection';
import SecondSection from 'components/SecondSection';
import ThirdSection from 'components/ThirdSection';
import FourthSection from 'components/FourthSection';
import Sidebar from 'components/Sidebar';
import toggleState from 'components/Header';
function App(props) {
return (
<div className="">
<Header setToggleState={toggleState}/>
<div className="row mlr0 w-100">
<div className={`pl-0 a ${toggleState ? 'col-md-3': 'd-none'}`} id="showOnClick">
<Sidebar />
</div>
<div className="col-md-9" id="fullScreen">
<FirstSection/>
<SecondSection/>
<ThirdSection/>
<FourthSection/>
<div className="row justify-content-center">
<img src={require("./images/Aqomi_Logo_Pink_Web_Small.png")} className="pb17"/>
</div>
</div>
</div>
</div>
);
}
export default App;
App.js
import React, { useState } from "react";
import App from './../App';
export default function Header(props){
const [toggleState, setToggleState] = useState(true);
function changeClass(){
setToggleState(!toggleState);
}
return(
<div>
<li className="nav-item"><a className="navbar-brand pl-1 hm " onClick={changeClass}>
<img src={require("./../images/line.png")} height="23px" className={toggleState.className} />
</a></li>
</div>
)
}
Header.js