Menu List Item - hover active state does not work if using elements

I have a component like this.

      <Menu
        className="share-admin-menu"
        style={{
          backgroundColor: 'white',
          padding: '20px',
          color: 'white',
          width: '200px',
        }}
      >
        <Menu.List title={username} className="share-admin-menu__title">
          <Menu.List.Item
            active={active === 'edit'}
            onClick={this.onEditClick}>
              <div className="share-admin-menu__edit-container mb-one">
                <p className="share-admin-menu__text-option">
                  Edit
                </p>
                <Icon
                  className="debut-icon debut-icon--pointer ml-one"
                  icon="IconPencil"
                  color="#518DCA"
                />
              </div>
          </Menu.List.Item>
          <Menu.List.Item
            active={active === 'delete'}
            onClick={this.onDeleteClick}>
              <div className="share-admin-menu__delete-container mb-one">
                <p className="share-admin-menu__text-option">Delete</p>
                <Icon
                  className="debut-icon debut-icon--pointer ml-one"
                  icon="IconTrash"
                  color="#EA1D64"
                />
              </div>
            </Menu.List.Item>
          <Menu.List.Item
            active={active === 'detail'}
            onClick={this.onFollowersClick}>
            <div className="share-admin-menu__go-to-container">
              <p className="share-admin-menu__text-option">Go to Share</p>
              <Icon
                className="debut-icon debut-icon--pointer ml-one"
                icon="IconGo"
                color="#3ac569"
              />
            </div>
          </Menu.List.Item>
        </Menu.List>
      </Menu>

which renders out this…

Visually it looks good but i lose the ability of the hover and active state. Is there a work around for this?

[kkomaz]

@MrCreeper1008 In the meantime ill do that 😃 thanks!

[kennethnym]

@kkomaz the behavior you are having problems with is actully a default in bulma (You can check it out here), and this library has nothing to do with it. You must wrap an a tag around any content inside the list item. That said, it would be better if this library would do the wrapping for you. I’ll make a PR in my free time.

Edit: If the sandbox does not work for you, refresh the preview and it’ll work again.