Adding a button/icon to each row of a Semantic UI React dropdown

Question

Related to this question How to add a button within a dropdown menu?

Working Codesandbox

I have a Semantic UI React Dropdown and I want to place a little, clickable, delete icon on each row of the dropdown, similar to this photo.

How can I do that?

Answer 1

you can do like this

   <Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
 <Dropdown.Menu>
  <Dropdown.Header icon='tags' content='Filter by tag' />
  <Dropdown.Divider />
  <Dropdown.Item>
    <Icon name='attention' className='right floated' />
    Important
  </Dropdown.Item>
  <Dropdown.Item>
    <Icon name='comment' className='right floated' />
    Announcement
  </Dropdown.Item>
  <Dropdown.Item>
    <Icon name='conversation' className='right floated' />
    Discussion
  </Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

if you have some dynamic data then simple map it

<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
 >
<Dropdown.Menu>
  <Dropdown.Header icon='tags' content='Filter by tag' />
  <Dropdown.Divider />

  {
    options.map(item => <Dropdown.Item>
    <Icon name={item.icon} className='right floated' />
    {item.name}
    </Dropdown.Item>)

  }
 </Dropdown.Menu>
</Dropdown>