title: How to use href in Material-ui
body: <p>I asked this code before but worded it poorly. I'm trying to get my menuItems to work with href, so far my &quot;Home&quot; button works with href but i cannot get, &quot;Sessions Home&quot;, &quot;Book a Session&quot; or &quot;[S] Host a session&quot; to work.</p>
  <p>Any help is appreciated :D</p>
  <p>P.S: The onClick: () =&gt; {Console.log()} inside of &quot;Sessions home&quot; works but that's as far as i've gotten.</p>
  <p><strong>Header.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import MenuButton from &quot;./MenuButton.js&quot;;
  
  const Header = () =&gt; {
      const menu = [
          {
              name: &quot;Home&quot;,
              href: &quot;/&quot;,
          },
          {
              name: &quot;Sessions&quot;,
              menuItems: [
                  {
                      name: &quot;Sessions Home&quot;,
                      href: &quot;/sessions&quot;,
                      key: &quot;Sessions&quot;,
                      onClick: () =&gt; {Console.log(&quot;This button click works!&quot;)}
                  },
                  {
                      name: &quot;Book a Session&quot;,
                      href: &quot;/sessions/book&quot;,
                      key: &quot;Book&quot;
                  },
                  {
                      name: &quot;[S] Host a session&quot;,
                      href: &quot;/sessions/host&quot;,
                      key: &quot;Host&quot;
                  }
              ]
          }
      ];
      return menu.map((item, index) =&gt; &lt;MenuButton key={index} menu={item} /&gt;);
  };
  export default Header;
  </code></pre>
  <p><strong>MenuButton.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { Button, Menu, MenuItem } from &quot;@material-ui/core&quot;;
  
  const MenuButton = ({ menu }) =&gt; {
      const [anchorEl, setAnchorEl] = React.useState(null);
  
      const handleClick = (event) =&gt; {
          setAnchorEl(event.currentTarget);
      };
  
      const handleClose = () =&gt; {
          setAnchorEl(null);
      };
  
      if(menu.menuItems == null){
          return (
              &lt;&gt;
                  &lt;Button
                      aria-controls={`${menu.name}-menu`}
                      aria-haspopup=&quot;true&quot;
                      href={menu.href}
                      onClick={handleClick}
                  &gt;
                      {menu.name}
                  &lt;/Button&gt;
              &lt;/&gt;
          );
      } else {
          return (
              &lt;&gt;
                  &lt;Button
                      aria-controls={`${menu.name}-menu`}
                      aria-haspopup=&quot;true&quot;
                      onClick={handleClick}
                  &gt;
                      {menu.name}
                  &lt;/Button&gt;
                  &lt;Menu
                      id={`${menu.name}-menu`}
                      anchorEl={anchorEl}
                      getContentAnchorEl={null}
                      keepMounted
                      open={Boolean(anchorEl)}
                      onClose={handleClose}
                  &gt;
                      {menu.menuItems.map((item) =&gt; (
                          &lt;MenuItem href={item.href} key={item.href} onClick={item.onClick}&gt;
                              {item.name}
                          &lt;/MenuItem&gt;
                      ))}
                  &lt;/Menu&gt;
              &lt;/&gt;
          );
      }
  };
  
  export default MenuButton;
  </code></pre>