Multiple Menus not Working

[Cristian Navarrete]

MenuDerecha.jsx

import { slide as Menu } from 'react-burger-menu';
import { decorator as reduxBurgerMenu } from 'redux-burger-menu';
export default reduxBurgerMenu(Menu, 'primary');

MenuIzquierda.jsx

import { slide as Menu } from 'react-burger-menu';
import { decorator as reduxBurgerMenu } from 'redux-burger-menu';
export default reduxBurgerMenu(Menu, 'secondary');

App

<MenuIzquierda pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } customBurgerIcon={ false }>
			<a id="home" className="menu-item" href="/">Home</a>
			<a id="about" className="menu-item" href="/about">About</a>
			<a id="contact" className="menu-item" href="/contact">Contact</a>
</MenuIzquierda>

<MenuDerecha Right pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } customBurgerIcon={ false }>
			<a id="home" className="menu-item" href="/">Home</a>
</MenuDerecha>

Redux:

[Cristian Navarrete]

Actually the issue is that the "primary" and "secondary" elements on the three are not created until you call toggleMenuDispatcher(true, location).

[Imogen]

Hi @cristiancs, ah yep, you're right!

I think this was working before due to a bug, which has since been fixed.

Thanks for reporting this.

[Imogen]

I have just updated the docs with the fix for this. This is the relevant part:

The final thing you have to do is hydrate your store with preloaded state using the IDs you gave each of your menus. You can do this by passing it as the second argument to Redux's createStore method, which will look something like this:

import { createStore } from 'redux';

const initialState = {
  burgerMenu: {
    primary: {
      isOpen: true
    },
    secondary: {
      isOpen: false
    }
  }
};

const store = createStore(combineReducers(...), initialState);

Then your store will be initialized with the correct state.

Thanks again!