Ternary operator in the render method

Question

I'm trying to show a message if the user is not logged in. Please Login here to continue.

In my render method, I need to check to see if the user is already logged in to not show any message.
I also have a login method that directs user to the login page. (

{
  this.props.isAuthed 
    ? <div> </div>
    : <div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>
}

I have two problems. One is the above if statement doesn't work because it's not an if else statement. (The only solution I found is adding an empty <div> )

The other issue is I need to show a button to look like a hyperlinked text because I can't call the this.login function in a href . Now there's a big space (because of the button) between "login" and "here". I also need to make "here" red to inform the user that it's clickable.

Answer 1

Use a simple boolean expression:

 {!this.props.isAuthed &&
  <div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>
 }