Semantic UI has a dropdown example that takes a React node as a trigger
const trigger = (
<span>
<Image avatar src={faker.internet.avatar()} /> {faker.name.findName()}
</span>
)
const options = [
{ key: 'user', text: 'Account', icon: 'user' },
{ key: 'settings', text: 'Settings', icon: 'settings' },
{ key: 'sign-out', text: 'Sign Out', icon: 'sign out' },
]
const DropdownImageTriggerExample = () => (
<Dropdown trigger={trigger} options={options} pointing='top left' icon={null} />
)
In Meteor, I need to wrap the trigger in a Reactive container because Meteor.user().username may not be ready when the page is rendered
const UserName = ({ username }) => (<span><Icon name="user" />{username}</span>)
const UserNameContainer = createContainer(() => {
const user = Meteor.user()
return { username : user && user.username || "unknown" }
}, UserName)
<UserNameContainer /> // <-- this works
<Dropdown trigger={UserNameContainer} options={options} icon={null} />
But React doesn’t like it inside of the trigger
Failed prop type: Invalid prop `trigger` supplied to `Dropdown`, expected a ReactNode.
When you print to the console the objects you notice they are not the same types
Object {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: Object…}
vs
function ReactMeteorData() { // 6
(0, _classCallCheck3.default)(this, ReactMeteorData);
Therefore I am not very surprised. But I can’t find how to achieve the desired reactivity.