React Link to and If Statement
1
so I have a function that I want to link to different pages of my project when a button is clicked.
Function below:
displayCharacterProfile() {
let getCharacterName = localStorage.getItem("characterName");
if(getCharacterName == "littlefinger") {
<Link to="/littlefinger"></Link>
}
if(getCharacterName == "tywin") {
<Link to="/tywin"></Link>
}
}
render() {
return (
<button className="enter" onClick={this.displayCharacterProfile}> Enter </button>
);
}
Any quick help would be greatly appreciated guys! Thank you :-)
reactjs onclick local-storage link-to
asked Nov 23 '18 at 23:30
BJones100BJones100
104
add a comment |
1
so I have a function that I want to link to different pages of my project when a button is clicked.
Function below:
displayCharacterProfile() {
let getCharacterName = localStorage.getItem("characterName");
if(getCharacterName == "littlefinger") {
<Link to="/littlefinger"></Link>
}
if(getCharacterName == "tywin") {
<Link to="/tywin"></Link>
}
}
render() {
return (
<button className="enter" onClick={this.displayCharacterProfile}> Enter </button>
);
}
Any quick help would be greatly appreciated guys! Thank you :-)
reactjs onclick local-storage link-to
asked Nov 23 '18 at 23:30
BJones100BJones100
104
add a comment |
1
1
1
so I have a function that I want to link to different pages of my project when a button is clicked.
Function below:
displayCharacterProfile() {
let getCharacterName = localStorage.getItem("characterName");
if(getCharacterName == "littlefinger") {
<Link to="/littlefinger"></Link>
}
if(getCharacterName == "tywin") {
<Link to="/tywin"></Link>
}
}
render() {
return (
<button className="enter" onClick={this.displayCharacterProfile}> Enter </button>
);
}
Any quick help would be greatly appreciated guys! Thank you :-)
reactjs onclick local-storage link-to
asked Nov 23 '18 at 23:30
BJones100BJones100
104
so I have a function that I want to link to different pages of my project when a button is clicked.
Function below:
displayCharacterProfile() {
let getCharacterName = localStorage.getItem("characterName");
if(getCharacterName == "littlefinger") {
<Link to="/littlefinger"></Link>
}
if(getCharacterName == "tywin") {
<Link to="/tywin"></Link>
}
}
render() {
return (
<button className="enter" onClick={this.displayCharacterProfile}> Enter </button>
);
}
Any quick help would be greatly appreciated guys! Thank you :-)
reactjs onclick local-storage link-to
reactjs onclick local-storage link-to
asked Nov 23 '18 at 23:30
BJones100BJones100
104
asked Nov 23 '18 at 23:30
BJones100BJones100
104
asked Nov 23 '18 at 23:30
BJones100BJones100
104
asked Nov 23 '18 at 23:30
BJones100BJones100
104
asked Nov 23 '18 at 23:30
BJones100BJones100
104
104
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Welcome to StackOverflow! When you render a Link element, all it does is display a link to the user. The user has to actually click it in order to go there. Try this:
render() {
let getCharacterName = localStorage.getItem("characterName");
return (
<button className="enter">
<Link to={"/" + getCharacterName}> Enter </Link>
</button>
);
}
answered Nov 23 '18 at 23:39
ethan.rodayethan.roday
1,110720
It would probably be better to pass the character name in as a prop and have some other component handle thelocalStoragecall, but I guess that's not technically related to your question :)
– ethan.roday
Nov 23 '18 at 23:41
Thanks a bunch for your quick and accurate response!! It's now working :-)
– BJones100
Nov 24 '18 at 2:17
Awesome! Glad it’s working. Don’t forget to accept and upvote an answer if it was helpful!
– ethan.roday
Nov 24 '18 at 2:22
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
});
}
});
draft saved
draft discarded
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%2f53453865%2freact-link-to-and-if-statement%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
0
Welcome to StackOverflow! When you render a Link element, all it does is display a link to the user. The user has to actually click it in order to go there. Try this:
render() {
let getCharacterName = localStorage.getItem("characterName");
return (
<button className="enter">
<Link to={"/" + getCharacterName}> Enter </Link>
</button>
);
}
answered Nov 23 '18 at 23:39
ethan.rodayethan.roday
1,110720
It would probably be better to pass the character name in as a prop and have some other component handle thelocalStoragecall, but I guess that's not technically related to your question :)
– ethan.roday
Nov 23 '18 at 23:41
Thanks a bunch for your quick and accurate response!! It's now working :-)
– BJones100
Nov 24 '18 at 2:17
Awesome! Glad it’s working. Don’t forget to accept and upvote an answer if it was helpful!
– ethan.roday
Nov 24 '18 at 2:22
add a comment |
0
Welcome to StackOverflow! When you render a Link element, all it does is display a link to the user. The user has to actually click it in order to go there. Try this:
render() {
let getCharacterName = localStorage.getItem("characterName");
return (
<button className="enter">
<Link to={"/" + getCharacterName}> Enter </Link>
</button>
);
}
answered Nov 23 '18 at 23:39
ethan.rodayethan.roday
1,110720
It would probably be better to pass the character name in as a prop and have some other component handle thelocalStoragecall, but I guess that's not technically related to your question :)
– ethan.roday
Nov 23 '18 at 23:41
Thanks a bunch for your quick and accurate response!! It's now working :-)
– BJones100
Nov 24 '18 at 2:17
Awesome! Glad it’s working. Don’t forget to accept and upvote an answer if it was helpful!
– ethan.roday
Nov 24 '18 at 2:22
add a comment |
0
0
0
Welcome to StackOverflow! When you render a Link element, all it does is display a link to the user. The user has to actually click it in order to go there. Try this:
render() {
let getCharacterName = localStorage.getItem("characterName");
return (
<button className="enter">
<Link to={"/" + getCharacterName}> Enter </Link>
</button>
);
}
answered Nov 23 '18 at 23:39
ethan.rodayethan.roday
1,110720
Welcome to StackOverflow! When you render a Link element, all it does is display a link to the user. The user has to actually click it in order to go there. Try this:
render() {
let getCharacterName = localStorage.getItem("characterName");
return (
<button className="enter">
<Link to={"/" + getCharacterName}> Enter </Link>
</button>
);
}
answered Nov 23 '18 at 23:39
ethan.rodayethan.roday
1,110720
answered Nov 23 '18 at 23:39
ethan.rodayethan.roday
1,110720
answered Nov 23 '18 at 23:39
ethan.rodayethan.roday
1,110720
answered Nov 23 '18 at 23:39
ethan.rodayethan.roday
1,110720
1,110720
It would probably be better to pass the character name in as a prop and have some other component handle thelocalStoragecall, but I guess that's not technically related to your question :)
– ethan.roday
Nov 23 '18 at 23:41
Thanks a bunch for your quick and accurate response!! It's now working :-)
– BJones100
Nov 24 '18 at 2:17
Awesome! Glad it’s working. Don’t forget to accept and upvote an answer if it was helpful!
– ethan.roday
Nov 24 '18 at 2:22
add a comment |
It would probably be better to pass the character name in as a prop and have some other component handle thelocalStoragecall, but I guess that's not technically related to your question :)
– ethan.roday
Nov 23 '18 at 23:41
Thanks a bunch for your quick and accurate response!! It's now working :-)
– BJones100
Nov 24 '18 at 2:17
Awesome! Glad it’s working. Don’t forget to accept and upvote an answer if it was helpful!
– ethan.roday
Nov 24 '18 at 2:22
It would probably be better to pass the character name in as a prop and have some other component handle the
localStorage call, but I guess that's not technically related to your question :)– ethan.roday
Nov 23 '18 at 23:41
It would probably be better to pass the character name in as a prop and have some other component handle the
localStorage call, but I guess that's not technically related to your question :)– ethan.roday
Nov 23 '18 at 23:41
Thanks a bunch for your quick and accurate response!! It's now working :-)
– BJones100
Nov 24 '18 at 2:17
Thanks a bunch for your quick and accurate response!! It's now working :-)
– BJones100
Nov 24 '18 at 2:17
Awesome! Glad it’s working. Don’t forget to accept and upvote an answer if it was helpful!
– ethan.roday
Nov 24 '18 at 2:22
Awesome! Glad it’s working. Don’t forget to accept and upvote an answer if it was helpful!
– ethan.roday
Nov 24 '18 at 2:22
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53453865%2freact-link-to-and-if-statement%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
