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>}
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
}