How to show username on dropdown button using React-Bootstrap and EJS? - express

Question

I would like to show username on dropdown button after users log in to my site. But, how is it done using React-Bootstrap?
My code for the dropdown button looks like this.
<DropdownButton title="Dropdown" id="bg-nested-dropdown">
<MenuItem eventKey="1">Account</MenuItem>
<MenuItem eventKey="2">Log Out</MenuItem>
</DropdownButton>
I want to change the title to username so that he/she can confirm that they actually logged in by seeing their username on the dropdown button.
I can retrieve username easily like this using EJS.
<% if (!user) { %>
some text
<% } else { %>
<%= user.username %>
<% } %>
But, I want to show the username(user.username) on the dropdown button.

Answer 1

You can do:
<DropdownButton title="Dropdown" id="bg-nested-dropdown">
<MenuItem eventKey="1">Account</MenuItem>
<MenuItem eventKey="2">Log Out</MenuItem>
{ user ? <MenuItem eventKey="x">{ user.username }</MenuItem> : <MenuItem eventKey="y">Some text</MenuItem> }
</DropdownButton>

Answer 2

Gilad's answer makes sense to me, but I've never tried this myself.
Maybe some things to consider:
are you keeping track of state anywhere and can you put your user object into state outside of this react button?
have you tried this.user?
have you tried creating an EJS element (like a < p >) with the username and telling React to load that if it exists?
none of these may do it, but hey. I'm going to be doing some work like this in next few days and will update if I figure out something.

Answer 3

Its better to use <Dropdown/> instead of <DropdownButton/>
Example:
<Dropdown id="language-selector-in-header">
<Dropdown.Toggle>
<i className={iconClass}></i> Some text or other html elements
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem eventKey="en"><i className="flag-icon flag-icon-us"></i> English</MenuItem>
</Dropdown.Menu>
</Dropdown>