0

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}/>
           )
   })()}

2 Answers 2

0

This answer may be more than what you are asking for, but here it goes:

In this example you have three states: burgerClicked (in Navbar.js), open (in App.js), and showSideNav (in header.js).

It looks like all three of those keep track of the same thing: "is the side nav open?". You don't want that, you should have only one component that keeps track of that.

Based on your example, I would say that only App.js should have that state, and pass its value to Navbar and header as props.

In Navbar.js, the onClick just needs to call the clicked function, without passing any param. Then, App.js figures out whether to set open to true or false, (which most likely just means toggling it).

Once App.js updates its state, it will pass that updated value down to header and Navbar and that's the beauty of React.

2
  • it still gonna do it asynchronously
    – user12143749
    Oct 1, 2019 at 16:17
  • yeah, it will still be asynchronous, but React handles that asynchronousity (real word?) very well, and is a normal use case. Having the multiple states that need to stay in sync is not a normal React use case, and that asynchronousity will get things messy real quick. Oct 1, 2019 at 16:25
0

Your Question is kinda not understandable and only can figure out you want to use conditional rendering. Read this https://reactjs.org/docs/conditional-rendering.html
Hope it will help you :)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.