Add Avatar (user profile photo) to Semantic UI React's Dropdown

Question

As a side project I wrote a little app, and for themes and layout I used React-Bootsrap. Right now I'm trying to learn Semantic UI React & I can't figure out how to add user profile photo to the dropdown (originally got the idea from Github's dropdown)

This is how it looks right now in my app using React Bootstrap

React Bootstrap code:

  <NavDropdown
      alignRight
      title={<StyledUserIMG src={user.photoURL} alt='userPhoto' />}
    >
      <NavDropdown.ItemText>
        Signed in as <b>{user.displayName}</b>
      </NavDropdown.ItemText>
      <NavDropdown.Item onClick={async () => await signOut()}>
        <b>Sign Out </b>
        <i className='fas fa-sign-out-alt'></i>
      </NavDropdown.Item>
    </NavDropdown> 

Semantic UI code (what I have so far):

<Dropdown item>
  <Dropdown.Item>
    Signed in as <b>{user.displayName}</b>
  </Dropdown.Item>
  <Dropdown.Item onClick={async () => await signOut()}>
    <b>Sign Out </b> <i className='fas fa-sign-out-alt'></i>
  </Dropdown.Item>
</Dropdown>

Thank you in advance, wish y'all the best.

Answer 1

This works on same principle as Alex Court suggested, just doesn't throw expected text error.

found it on:

https://react.semantic-ui.com/modules/dropdown/#usage-trigger

import React from 'react'
import { Dropdown, Image } from 'semantic-ui-react'

export const DropdownMenu = () => (

const trigger = <Image avatar src={user.photoURL} />;

const options = [
  {
    key: 'user',
    text: (
      <span>
         Signed in as <strong>{user.displayName}</strong>
      </span>
    ),
    disabled: true,
  },
  
    {
      key: 'settings',
      text: 'Settings',
      icon: 'setting',
    },
    {
      key: 'signOut',
      text: 'Sign Out',
      icon: 'sign out alternate',
    },
  ];
return (

  <Dropdown trigger={trigger} options={options} />
)
}