i am trying to collapse the nav bar on onclick method but it is not working

Question

this is the error from console :

Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWilmount'.

code:

    import {Component, PropTypes} from 'react';

    import './Header.less';

    import { Button,Navbar, Nav, NavItem, CollapsibleNav,  NavDropdown, NavBrand, MenuItem} from 'react-bootstrap';

    import SearchBar from 'components/search/SearchBar';

    import {LinkContainer} from 'react-router-bootstrap';

export default class Header extends Component {

    static propTypes = {

        flux: PropTypes.object.isRequired,

        searchTerm: PropTypes.string

    };

    state = {
            navExpanded: false
    }

    onNavItemClick = () => {
        this.setState({ navExpanded: false });
    }

    onNavbarToggle = () => {
        this.setState({navExpanded: !this.state.navExpanded});
    }

    render() {
        return (
            <Navbar fixedTop inverse  toggleNavKey={0} onClick={this.onNavbarToggle()}>
                <Navbar.Header>
                    <Navbar.Brand>
                        <LinkContainer to={"/"}>
                            <a className="navbar-brand"><img alt="######" src={Logo} /></a>
                        </LinkContainer>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav navbar>
                        <LinkContainer to={"/#####"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={1}>xxxxxxxxxxxxxx</NavItem>
                        </LinkContainer>
                        <LinkContainer to={"/#####"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={2}>xxxxxxxxxxxx</NavItem>
                        </LinkContainer>
                        <LinkContainer to={"/#######"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={3}>xxxxxxxxx</NavItem>
                        </LinkContainer>
                        <LinkContainer to={"/######"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={4}>xxxxxxxxx</NavItem>
                        </LinkContainer>
                        <LinkContainer to={"/######"}>
                            <NavItem onClick={ this.onNavItemClick } eventKey={5}>xxxxxxxxx</NavItem>
                        </LinkContainer>
                    </Nav>
                    <Nav pullRight>
                        <SearchBar onClick={ this.onNavItemClick } searchTerm={this.props.searchTerm} />
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }
}

Answer 1

In this line:

<Navbar fixedTop inverse toggleNavKey={0} onClick={this.onNavbarToggle()}>

Instead of passing in the function body this.onNavbarToggle you're passing in the result of running the function, which is not what you want. The function is being evaluated on every render. You need to pass in a reference to the function, not the result of the function, like so:

<Navbar fixedTop inverse toggleNavKey={0} onClick={this.onNavbarToggle}>