i have a navbar when i click on it i'm setting my state to true and passing it in my component as prop but the function takes time update it and my props are sent as false how can i send my updated prop when the state update is complete
navbar.js
constructor(props) {
super(props);
this.state = {
burgerClicked:false,
};
}
burgerClicked=()=>{
this.setState({ burgerClicked: true },()=>{ this.props.clicked(this.state.burgerClicked)})
}
app.js
constructor(props){
super(props);
this.state={
open:false,
}
}
openSideNav =(burgerClicked)=>{// the time is taking here to update it send open as false
this.setState({open:burgerClicked},()=>{
console.log(this.state.open)
});
<Navbar clicked={this.openSideNav} tokenRequested={this.request}/>
<Header open={this.state.open} />
header.js
constructor(props) {
super(props);
this.state = { showSideNav: false };
}
UNSAFE_componentWillReceiveProps(){
//
console.log(this.props.open,this.state.showSideNav);//this.props.open is false
if (this.props.open) {
this.setState({showSideNav:this.props.open},()=>{
console.log(this.state.showSideNav); //this.state.showSideNav dont print on first click but print true on second click on burger
})
}
console.log(this.props.open,this.state.showSideNav); //this.props.open is false
}
{(() => {
if (!this.state.showSideNav) {
return null;
}
return(
<SideNavbar closeNav={this.closeSideNav}/>
)
})()}