0

Basically I have a sidebar activated with hover which has submenus activated with react-transition-group CSSTransition element. I'm able to access the submenu from the buttons but when I click on the button that is supposed to go back to the 'main' menu the screen goes blank. I don't see what I've missed. :/

Here's an overview of the code.

const [activeMenu, setActiveMenu] = React.useState('main')

return (

<>

<CSSTransition 
  in={activeMenu === 'main'}
  unmountOnExit
  timeout={500}
  classNames="menu-primary">
    <div className="menu">
        <button onClick={() => setActiveMenu('sub1')}>sub1</button>                    
    </div>
</CSSTransition>

<CSSTransition 
  in={activeMenu === 'sub1' || activeMenu === 'sub2'}
  unmountOnExit
  timeout={500}
  classNames="menu-secondary">
    <div className="menu">
        <button onClick={() => setActiveMenu('main')}></button>
    </div>
</CSSTransition>

</>

)
hoxas
  • 55
  • 5

1 Answers1

1

I fear that this snippet would give a compile error, because the React JSX snippets must be wrapped i.e. their can be only one outermost element.

Divya Prakash
  • 36
  • 1
  • Honestly I'm totally at fault here, really sorry, because in my code I actually have everything wrapped but I didn't want to fill the screen with the code which made me forget some important details. My latest hipothesis is that I can't go back to the 'main' because of function scope problems between react elements that are creating these buttons, given that the 'main' has one react element to create its buttons and all 'sub' menus have another react element to create the buttons. Could be wrong tho. – hoxas Apr 19 '21 at 22:12
  • No, it's not it. Tried including everything inside one react element and still no success. Same error of nothing was returned from (my react element name) even though it has clearly rendered because I get to see and interact with the sub menu but when I try to go back to the main it gives me this error pointing to the element that generated the sub menu. Any ideas why? – hoxas Apr 19 '21 at 22:20