import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { Menu , MenuButton , MenuList , MenuItem } from './Menu' ; import './styles.scss' ; function App ( ) { const logged = true ; return ( < Menu > < MenuButton className = "button" > Menu < /MenuButton> < MenuList > < MenuItem onSelect = { ( ) => console . log ( 'one' ) } > Item One < /MenuItem> < MenuItem onSelect = { ( ) => console . log ( 'two' ) } > Item Two < /MenuItem> { logged && < AuthenticatedMenuItems />} < /MenuList> < /Menu>); } function AuthenticatedMenuItems ( ) { return ( < > < MenuItem onSelect = { ( ) => console . log ( 'three' ) } > Item Three < /MenuItem> < MenuItem onSelect = { ( ) => console . log ( 'four' ) } > Item Four < /MenuItem> < />); } ReactDOM . render ( < App />, document.getElementById('root'));