Ternary operator in the render method
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.
javascript reactjs
edited Nov 20 '18 at 18:07
varit05
1,640716
asked Nov 20 '18 at 17:33
HannaHanna
273417
|
show 8 more comments
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.
javascript reactjs
edited Nov 20 '18 at 18:07
varit05
1,640716
asked Nov 20 '18 at 17:33
HannaHanna
273417
2
The?part can be just""no?
– Pointy
Nov 20 '18 at 17:33
yes but it's not different from the empty div that I mentioned.
– Hanna
Nov 20 '18 at 17:35
2
Hanna, please ask a second question for the second problem you have. These are two totally unrelated issues.
– Daniel Hilgarth
Nov 20 '18 at 17:35
I can't call the this.login function in a href- why is that?
– Bhojendra Rauniyar
Nov 20 '18 at 17:37
1
why not?<a onClick={}>??
– Bhojendra Rauniyar
Nov 20 '18 at 17:41
|
show 8 more comments
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.
javascript reactjs
edited Nov 20 '18 at 18:07
varit05
1,640716
asked Nov 20 '18 at 17:33
HannaHanna
273417
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.
javascript reactjs
javascript reactjs
edited Nov 20 '18 at 18:07
varit05
1,640716
asked Nov 20 '18 at 17:33
HannaHanna
273417
edited Nov 20 '18 at 18:07
varit05
1,640716
asked Nov 20 '18 at 17:33
HannaHanna
273417
edited Nov 20 '18 at 18:07
varit05
1,640716
edited Nov 20 '18 at 18:07
varit05
1,640716
edited Nov 20 '18 at 18:07
varit05
1,640716
1,640716
asked Nov 20 '18 at 17:33
HannaHanna
273417
asked Nov 20 '18 at 17:33
HannaHanna
273417
asked Nov 20 '18 at 17:33
HannaHanna
273417
273417
2
The?part can be just""no?
– Pointy
Nov 20 '18 at 17:33
yes but it's not different from the empty div that I mentioned.
– Hanna
Nov 20 '18 at 17:35
2
Hanna, please ask a second question for the second problem you have. These are two totally unrelated issues.
– Daniel Hilgarth
Nov 20 '18 at 17:35
I can't call the this.login function in a href- why is that?
– Bhojendra Rauniyar
Nov 20 '18 at 17:37
1
why not?<a onClick={}>??
– Bhojendra Rauniyar
Nov 20 '18 at 17:41
|
show 8 more comments
2
The?part can be just""no?
– Pointy
Nov 20 '18 at 17:33
yes but it's not different from the empty div that I mentioned.
– Hanna
Nov 20 '18 at 17:35
2
Hanna, please ask a second question for the second problem you have. These are two totally unrelated issues.
– Daniel Hilgarth
Nov 20 '18 at 17:35
I can't call the this.login function in a href- why is that?
– Bhojendra Rauniyar
Nov 20 '18 at 17:37
1
why not?<a onClick={}>??
– Bhojendra Rauniyar
Nov 20 '18 at 17:41
2
2
The
? part can be just "" no?– Pointy
Nov 20 '18 at 17:33
The
? part can be just "" no?– Pointy
Nov 20 '18 at 17:33
yes but it's not different from the empty div that I mentioned.
– Hanna
Nov 20 '18 at 17:35
yes but it's not different from the empty div that I mentioned.
– Hanna
Nov 20 '18 at 17:35
2
2
Hanna, please ask a second question for the second problem you have. These are two totally unrelated issues.
– Daniel Hilgarth
Nov 20 '18 at 17:35
Hanna, please ask a second question for the second problem you have. These are two totally unrelated issues.
– Daniel Hilgarth
Nov 20 '18 at 17:35
I can't call the this.login function in a href - why is that?– Bhojendra Rauniyar
Nov 20 '18 at 17:37
I can't call the this.login function in a href - why is that?– Bhojendra Rauniyar
Nov 20 '18 at 17:37
1
1
why not?
<a onClick={}>??– Bhojendra Rauniyar
Nov 20 '18 at 17:41
why not?
<a onClick={}>??– Bhojendra Rauniyar
Nov 20 '18 at 17:41
|
show 8 more comments
1 Answer
1
active
oldest
votes
Use a simple boolean expression:
{!this.props.isAuthed &&
<div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>
}
answered Nov 20 '18 at 17:34
Daniel HilgarthDaniel Hilgarth
139k32247358
thanks! do you have any solution for the second problem?
– Hanna
Nov 20 '18 at 17:37
Here you go: stackoverflow.com/a/53398926/572644
– Daniel Hilgarth
Nov 20 '18 at 18:07
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398468%2fternary-operator-in-the-render-method%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use a simple boolean expression:
{!this.props.isAuthed &&
<div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>
}
answered Nov 20 '18 at 17:34
Daniel HilgarthDaniel Hilgarth
139k32247358
thanks! do you have any solution for the second problem?
– Hanna
Nov 20 '18 at 17:37
Here you go: stackoverflow.com/a/53398926/572644
– Daniel Hilgarth
Nov 20 '18 at 18:07
add a comment |
Use a simple boolean expression:
{!this.props.isAuthed &&
<div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>
}
answered Nov 20 '18 at 17:34
Daniel HilgarthDaniel Hilgarth
139k32247358
thanks! do you have any solution for the second problem?
– Hanna
Nov 20 '18 at 17:37
Here you go: stackoverflow.com/a/53398926/572644
– Daniel Hilgarth
Nov 20 '18 at 18:07
add a comment |
Use a simple boolean expression:
{!this.props.isAuthed &&
<div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>
}
answered Nov 20 '18 at 17:34
Daniel HilgarthDaniel Hilgarth
139k32247358
Use a simple boolean expression:
{!this.props.isAuthed &&
<div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>
}
answered Nov 20 '18 at 17:34
Daniel HilgarthDaniel Hilgarth
139k32247358
answered Nov 20 '18 at 17:34
Daniel HilgarthDaniel Hilgarth
139k32247358
answered Nov 20 '18 at 17:34
Daniel HilgarthDaniel Hilgarth
139k32247358
answered Nov 20 '18 at 17:34
Daniel HilgarthDaniel Hilgarth
139k32247358
139k32247358
thanks! do you have any solution for the second problem?
– Hanna
Nov 20 '18 at 17:37
Here you go: stackoverflow.com/a/53398926/572644
– Daniel Hilgarth
Nov 20 '18 at 18:07
add a comment |
thanks! do you have any solution for the second problem?
– Hanna
Nov 20 '18 at 17:37
Here you go: stackoverflow.com/a/53398926/572644
– Daniel Hilgarth
Nov 20 '18 at 18:07
thanks! do you have any solution for the second problem?
– Hanna
Nov 20 '18 at 17:37
thanks! do you have any solution for the second problem?
– Hanna
Nov 20 '18 at 17:37
Here you go: stackoverflow.com/a/53398926/572644
– Daniel Hilgarth
Nov 20 '18 at 18:07
Here you go: stackoverflow.com/a/53398926/572644
– Daniel Hilgarth
Nov 20 '18 at 18:07
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398468%2fternary-operator-in-the-render-method%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
The
?part can be just""no?– Pointy
Nov 20 '18 at 17:33
yes but it's not different from the empty div that I mentioned.
– Hanna
Nov 20 '18 at 17:35
2
Hanna, please ask a second question for the second problem you have. These are two totally unrelated issues.
– Daniel Hilgarth
Nov 20 '18 at 17:35
I can't call the this.login function in a href- why is that?– Bhojendra Rauniyar
Nov 20 '18 at 17:37
1
why not?
<a onClick={}>??– Bhojendra Rauniyar
Nov 20 '18 at 17:41