If/Else or ternary for 'undefined' in React

Stackoverflow lurker but first time poster. I'm working on a user profile display for my React project and there are two files: userName and bio. If there is no bio, the output should be "userName", but if there is a bio, the output should be "userName, bio".

My issue is that bio comes back as undefined so an example output data becomes "Bob, undefined", which is not what I want.

Here is the code I have:

const userName = user.telescope.displayName;
const bio = user.telescope.bio;

retu (

  <a className="user-name" href={Users.getProfileUrl(user)}>
  {
  userName === 'undefined'
  ? userName 
  : userName + ', ' + bio
}
</a>
);