Calling auth0 login in href

Question

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

In the render method, I need to check and 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.

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.

I tried <div> Please login <a onClick={this.login}>here</a></div> but it "here" looks like a simple text. No link appears. Only the button can add a link and I don't know the reason.

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

Answer 1

Try this:

<div> Please login <a onClick={this.login} href="#">here</a></div>

The reason is: An a tag without the href attribute is not rendered like a link by browsers. To mitigate that, we add it with some arbitrary value.

On your onClick handler - login in your case - you need to ensure that you prevent the default action - navigating to the relative url # - from happening:

login = e => {
    e.preventDefault();
    // your login logic
}