CODEWITHSUNDEEP
javascriptreactjs
lukeet
lukeet

Reputation: 491

why is my funtion within componentDidMount() completely ignored?

Why is the function of setting the side draw to false ignored when I can get the exact same function to work on click? I can even get the componentDidMount to console.log what is happening? I have been trying different ways to get it to work componentWillunmount etc but nothing other than onclick seems to work with it any thoughts?

export class App extends Component {
  state = {
    sideDrawerOpen: false
  };


  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return { sideDrawerOpen: !prevState.sideDrawerOpen };
    });
  };

  sidedrawerToggleClickHandler = () => {
    this.setState({ sideDrawerOpen: false });
  }

  backdropClickHandler = () => {
    this.setState({ sideDrawerOpen: false });
  };

  componentDidMount() {
    this.setState({ sideDrawerOpen: false });
  };

  render() {
    let backdrop;
    if (this.state.sideDrawerOpen) {
      backdrop = <Backdrop click={this.backdropClickHandler} />
    }


    return (
      <div className="App_margin">
        <Router>
          <div className='App'>
            <Nav drawerClickHandler={this.drawerToggleClickHandler} />
            <SideDrawer  sidedrawerClickHandler={this.sidedrawerToggleClickHandler}  show={this.state.sideDrawerOpen} />
              { backdrop }
              < Switch >
              <Route path='/setup_page' component={setup_page} exact />
              <Route path='/main_page' component={main_page} />
              <Route path='/settings_page' component={settings_page} />
              <Route component={Error} />
      </Switch>

    </div>
        </Router>
      </div>
    );
  }
}

Upvotes: 1

Views: 61

Answers (2)

S. Hesam
S. Hesam

Reputation: 6603

Your componetsDidMount() is completely useless and your code is OK if you remove it.

Upvotes: 0

maison.m
maison.m

Reputation: 863

Your state is initializing with state = { sideDrawerOpen: false }. When you run the componentDidMount() function you are trying to set this.state.sideDrawerOpen to false. The state is not changing, therefore there are no updates.

Since you are already initializing the sideDrawerOpen property to false, there is no need to set it to false again upon component mount.

Upvotes: 2

Related Questions