title: Create React List with Remove Button on Hover
body: <p>I'm creating a DropDown List box and each item in the list has a remove (X) button to remove the item from the list.  How is it possible to show the remove button "only" when the item is hovered over?</p>
  
  <p>The current code shows the clear button each each item but I only want it to show when the item is hovered over</p>
  
  <p><a href="https://i.stack.imgur.com/Mt3Yw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mt3Yw.png" alt="enter image description here"></a></p>
  
  <pre><code>Sorry, here is the code
  
  
    import React from 'react';
     import PropTypes from 'prop-types';
     import styled from 'styled-components';
  
      const ListWrapper = styled.div`
    position: absolute;
    width: 16rem;
    z-index: 1;
    background: white;
  
    &amp;:hover {
      cursor: pointer;
    } 
  
  `;
  
  const ListMenu = styled.div`
  position: absolute;
  width: 100%;
  z-index: 1;
  background: white;
  overflow-x: hidden;
  `;
  
  const ListMenuHeader = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  `;
  
  const DropdownText = Text.Link.extend`
    padding-top: 3rem;
  `;
  
  const DropdownButton = styled.div`
    padding:  1 rem 0.75rem;
  `;
  
  const ListMenuItem = styled.div`
    display: flex;
    background-color: grey)};
    color: grey}; 
  
    &gt;[name~=icon] {
      right: 0rem;  
      border-radius: 0;
      background: none;  
      align-items: right;
      justify-content: right;  
  
    &amp;:hover {
      background-color: grey)};
    }
    &amp;:focus {
      outline: none;
    }
  `;
  
  class ListListMenu extends React.Component {
    static propTypes = {
      id: PropTypes.string.isRequired,
      text: PropTypes.node.isRequired,
      items: PropTypes.arrayOf(PropTypes.any).isRequired,
      component: PropTypes.func.isRequired,  
      selectedItem: PropTypes.any,
      getItemProps: PropTypes.func.isRequired,
      highlightedIndex: PropTypes.number,
      closeListMenu: PropTypes.func.isRequired,
    };
  
    static defaultProps = {
      selectedItem: null,
      highlightedIndex: null,
    }
  
  
    onClearClick = (items,item1) =&gt; (item) =&gt; {
  
      const index = items.indexOf(item1);
      if (index &gt; -1) {
          items.splice(index, 1);
     }
    }
  
    render() {
      const {
        id, text, items, component,  selectedItem, getItemProps,
        highlightedIndex, closeListMenu,
      } = this.props; 
  
  
      return (
        &lt;ListWrapper id={id} &gt;
          &lt;ListMenuHeader onClick={closeListMenu}&gt;
            &lt;DropdownText&gt;{text}&lt;/DropdownText&gt;
            &lt;DropdownButton
              id={`${id}-button`}
            &gt;
              &lt;Icon type="caret-up" appearance="neutral" /&gt;
            &lt;/DropdownButton&gt;
          &lt;/ListMenuHeader&gt;
          &lt;ListMenu&gt;
            {selectedItems.map((item, index) =&gt; (
              &lt;ListMenuItem
                {...getItemProps({
                  item,
                  isActive: highlightedIndex === index,
                  isSelected: _.isEqual(selectedItem, item),
                })}
                key={index} 
              &gt;
                {React.createElement(component, { item })}
  
  
                &lt;Button   // CLEAR BUTTON
            name={item}
            id={item}
            icon="remove"
            onClick={this.onClearClick(items, item)}
            circle
            display="flat"
            appearance="disabled"
            id="clear-search-button"          
          /&gt;
  
              &lt;/ListMenuItem&gt;
            ))}
  
  
          &lt;/ListMenu&gt;
        &lt;/ListWrapper&gt;
      );
    }
  }
  
  export default ListListMenu;
  </code></pre>