The menu is still open when I click on the menu item

[MaralS]

Hello, I have a website using react-burger-menu but it is still open when i click on a menu item. I don't know what I'm doing wrong.

import Navigation from './navigation';
import Icons from './icons';
import {
    Link
} from 'react-router-dom';
import { slide as Menu } from 'react-burger-menu'

class Header extends Component {
    showSettings(event) {
        event.preventDefault();

    }

    render() {
        var styles = {
            bmBurgerButton: {
                position: 'absolute',
                width: '30px',
                height: '25px',
                right: '36px',
                top: '36px'
            },
            bmBurgerBars: {
                background: '#aeaeae',
                height:'3px'
            },
            bmCrossButton: {
                height: '36px',
                width: '36px'
            },
            bmCross: {
                background: '#aeaeae'
            },
            bmMenu: {
                background: 'white',
                padding: '2.5em 1.5em 0',
                fontSize: '1em'
            },
            bmMenuWrap: {
                width:'100%'
            },
            bmMorphShape: {
                fill: '#373a47'
            },
            bmItemList: {
                color: 'currentColor',
                padding: '0.8em'
            },

        };
        return (
            <header>
                <div className="logo-area">
                    <Link to='/' title="Boutique Maral &amp; David" onClick={this.toggle}>
                        <img className="svg" src={Icons.logoDark} alt="Logo boutique Maral et David" />
                    </Link>
                </div>
                <Navigation />
                <div className="mobile">

                    <Menu noOverlay isOpen={false} styles={styles} disableAutoFocus > 
                        <ul>
                            <li><Link to='/notre-boutique' title="A propos">Notre boutique</Link></li>
                            <li><Link to='/nos-produits/pret-a-porter' title="Pr&ecirc;t-&agrave;-porter">Pr&ecirc;t-&agrave;-porter</Link></li>
                            <li><Link to='/nos-produits/accessoires' title="Accessoires">Accessoires</Link></li>
                            <li><Link to='/relais-colis' title="Relais Colis">Relais Colis</Link></li>
                            <li><Link to='/contact' title="Contact" >Contact</Link></li>
                            <li className="tel"><a href='tel:+33339022197' title='Appeler la boutique'>03 39 02 21 97</a></li>
                        </ul>
                    </Menu>
                </div>
            </header>
        );

    }
}

export default Header;``` 

Thanks for your help,
Maral

[negomi]

Hey @MaralS,

You should never need to pass isOpen={false} explicitly.

It looks like you need to control the state externally.

This example in the FAQ should help: https://github.com/negomi/react-burger-menu/wiki/FAQ#i-want-to-control-the-open-state-programmatically-but-i-dont-understand-how-to-use-the-isopen-prop

[MaralS]

Hey @MaralS,

You should never need to pass isOpen={false} explicitly.

It looks like you need to control the state externally.

This example in the FAQ should help: https://github.com/negomi/react-burger-menu/wiki/FAQ#i-want-to-control-the-open-state-programmatically-but-i-dont-understand-how-to-use-the-isopen-prop

Oh ok, thanks for the answer !