Set State then do a redirect/navigate
up vote
0
down vote
favorite
How can I do a function call only after one has executed in an onClick.
So I'm trying to set state in the on click, and then redirect to the other page. Something like this.
{data => {
return (
<MenuItem selected={isHighlighted} component="div"
onClick={e => {
e.preventDefault();
() => data.setSidenav(path)
navigate(path)
}}
>
</MenuItem>
);
}}
</ContextConsumer>
javascript reactjs state
asked Nov 22 at 16:40
AnneJoday
246
add a comment |
up vote
0
down vote
favorite
How can I do a function call only after one has executed in an onClick.
So I'm trying to set state in the on click, and then redirect to the other page. Something like this.
{data => {
return (
<MenuItem selected={isHighlighted} component="div"
onClick={e => {
e.preventDefault();
() => data.setSidenav(path)
navigate(path)
}}
>
</MenuItem>
);
}}
</ContextConsumer>
javascript reactjs state
asked Nov 22 at 16:40
AnneJoday
246
You haven't included any details about how or why context isn't working, if you can include an error message or symptom I might be able to help.
– Toby
Nov 22 at 16:50
Where are you declaring your context initially?
– Toby
Nov 22 at 16:57
MenuItem doesn't actually have any content inside it. But it's tricky to troubleshoot without seeing more code.
– Toby
Nov 22 at 17:01
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
How can I do a function call only after one has executed in an onClick.
So I'm trying to set state in the on click, and then redirect to the other page. Something like this.
{data => {
return (
<MenuItem selected={isHighlighted} component="div"
onClick={e => {
e.preventDefault();
() => data.setSidenav(path)
navigate(path)
}}
>
</MenuItem>
);
}}
</ContextConsumer>
javascript reactjs state
asked Nov 22 at 16:40
AnneJoday
246
How can I do a function call only after one has executed in an onClick.
So I'm trying to set state in the on click, and then redirect to the other page. Something like this.
{data => {
return (
<MenuItem selected={isHighlighted} component="div"
onClick={e => {
e.preventDefault();
() => data.setSidenav(path)
navigate(path)
}}
>
</MenuItem>
);
}}
</ContextConsumer>
javascript reactjs state
javascript reactjs state
asked Nov 22 at 16:40
AnneJoday
246
asked Nov 22 at 16:40
AnneJoday
246
edited Nov 22 at 17:02
asked Nov 22 at 16:40
AnneJoday
246
asked Nov 22 at 16:40
AnneJoday
246
asked Nov 22 at 16:40
AnneJoday
246
246
You haven't included any details about how or why context isn't working, if you can include an error message or symptom I might be able to help.
– Toby
Nov 22 at 16:50
Where are you declaring your context initially?
– Toby
Nov 22 at 16:57
MenuItem doesn't actually have any content inside it. But it's tricky to troubleshoot without seeing more code.
– Toby
Nov 22 at 17:01
add a comment |
You haven't included any details about how or why context isn't working, if you can include an error message or symptom I might be able to help.
– Toby
Nov 22 at 16:50
Where are you declaring your context initially?
– Toby
Nov 22 at 16:57
MenuItem doesn't actually have any content inside it. But it's tricky to troubleshoot without seeing more code.
– Toby
Nov 22 at 17:01
You haven't included any details about how or why context isn't working, if you can include an error message or symptom I might be able to help.
– Toby
Nov 22 at 16:50
You haven't included any details about how or why context isn't working, if you can include an error message or symptom I might be able to help.
– Toby
Nov 22 at 16:50
Where are you declaring your context initially?
– Toby
Nov 22 at 16:57
Where are you declaring your context initially?
– Toby
Nov 22 at 16:57
MenuItem doesn't actually have any content inside it. But it's tricky to troubleshoot without seeing more code.
– Toby
Nov 22 at 17:01
MenuItem doesn't actually have any content inside it. But it's tricky to troubleshoot without seeing more code.
– Toby
Nov 22 at 17:01
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
setState can take a callback:
this.setState({ some: 'thing' }, () =>
// do something here - only executes
// once setState has run
console.log(this.state.some)
)
So you could pass your navigate function to data.setSidenav and have it run as the setState callback. Alternatively, you could just have the navigate function in the setSidenav function since they both seem to take "path" as an argument.
answered Nov 22 at 16:49
Toby
4,88042146
This is a stateless component. I'm not setting state here. I'm trying to setState on my global state which is why I'm using React Context API. So not sure how I could do a setState.
– AnneJoday
Nov 22 at 16:57
You haven't posted the code where you actually setState, this answer is simply to demonstrate how to use the setState callback. Can you move the navigate function to where you actually use setState?
– Toby
Nov 22 at 16:59
I'm calling setSidenav method which is updating state in my React Context API
– AnneJoday
Nov 22 at 17:02
I see that. Can you callnavigate()as a callback using the code in my answer? Doesnavigate()have to be in your stateless component?
– Toby
Nov 22 at 17:06
Ah ok, so this worked. data.setSidenav(newPath, () =>{ navigate(suggestion.path)})
– AnneJoday
Nov 22 at 17:09
|
show 1 more 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',
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%2f53435209%2fset-state-then-do-a-redirect-navigate%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
up vote
1
down vote
accepted
setState can take a callback:
this.setState({ some: 'thing' }, () =>
// do something here - only executes
// once setState has run
console.log(this.state.some)
)
So you could pass your navigate function to data.setSidenav and have it run as the setState callback. Alternatively, you could just have the navigate function in the setSidenav function since they both seem to take "path" as an argument.
answered Nov 22 at 16:49
Toby
4,88042146
This is a stateless component. I'm not setting state here. I'm trying to setState on my global state which is why I'm using React Context API. So not sure how I could do a setState.
– AnneJoday
Nov 22 at 16:57
You haven't posted the code where you actually setState, this answer is simply to demonstrate how to use the setState callback. Can you move the navigate function to where you actually use setState?
– Toby
Nov 22 at 16:59
I'm calling setSidenav method which is updating state in my React Context API
– AnneJoday
Nov 22 at 17:02
I see that. Can you callnavigate()as a callback using the code in my answer? Doesnavigate()have to be in your stateless component?
– Toby
Nov 22 at 17:06
Ah ok, so this worked. data.setSidenav(newPath, () =>{ navigate(suggestion.path)})
– AnneJoday
Nov 22 at 17:09
|
show 1 more comment
up vote
1
down vote
accepted
setState can take a callback:
this.setState({ some: 'thing' }, () =>
// do something here - only executes
// once setState has run
console.log(this.state.some)
)
So you could pass your navigate function to data.setSidenav and have it run as the setState callback. Alternatively, you could just have the navigate function in the setSidenav function since they both seem to take "path" as an argument.
answered Nov 22 at 16:49
Toby
4,88042146
This is a stateless component. I'm not setting state here. I'm trying to setState on my global state which is why I'm using React Context API. So not sure how I could do a setState.
– AnneJoday
Nov 22 at 16:57
You haven't posted the code where you actually setState, this answer is simply to demonstrate how to use the setState callback. Can you move the navigate function to where you actually use setState?
– Toby
Nov 22 at 16:59
I'm calling setSidenav method which is updating state in my React Context API
– AnneJoday
Nov 22 at 17:02
I see that. Can you callnavigate()as a callback using the code in my answer? Doesnavigate()have to be in your stateless component?
– Toby
Nov 22 at 17:06
Ah ok, so this worked. data.setSidenav(newPath, () =>{ navigate(suggestion.path)})
– AnneJoday
Nov 22 at 17:09
|
show 1 more comment
up vote
1
down vote
accepted
up vote
1
down vote
accepted
setState can take a callback:
this.setState({ some: 'thing' }, () =>
// do something here - only executes
// once setState has run
console.log(this.state.some)
)
So you could pass your navigate function to data.setSidenav and have it run as the setState callback. Alternatively, you could just have the navigate function in the setSidenav function since they both seem to take "path" as an argument.
answered Nov 22 at 16:49
Toby
4,88042146
setState can take a callback:
this.setState({ some: 'thing' }, () =>
// do something here - only executes
// once setState has run
console.log(this.state.some)
)
So you could pass your navigate function to data.setSidenav and have it run as the setState callback. Alternatively, you could just have the navigate function in the setSidenav function since they both seem to take "path" as an argument.
answered Nov 22 at 16:49
Toby
4,88042146
answered Nov 22 at 16:49
Toby
4,88042146
answered Nov 22 at 16:49
Toby
4,88042146
answered Nov 22 at 16:49
Toby
4,88042146
4,88042146
This is a stateless component. I'm not setting state here. I'm trying to setState on my global state which is why I'm using React Context API. So not sure how I could do a setState.
– AnneJoday
Nov 22 at 16:57
You haven't posted the code where you actually setState, this answer is simply to demonstrate how to use the setState callback. Can you move the navigate function to where you actually use setState?
– Toby
Nov 22 at 16:59
I'm calling setSidenav method which is updating state in my React Context API
– AnneJoday
Nov 22 at 17:02
I see that. Can you callnavigate()as a callback using the code in my answer? Doesnavigate()have to be in your stateless component?
– Toby
Nov 22 at 17:06
Ah ok, so this worked. data.setSidenav(newPath, () =>{ navigate(suggestion.path)})
– AnneJoday
Nov 22 at 17:09
|
show 1 more comment
This is a stateless component. I'm not setting state here. I'm trying to setState on my global state which is why I'm using React Context API. So not sure how I could do a setState.
– AnneJoday
Nov 22 at 16:57
You haven't posted the code where you actually setState, this answer is simply to demonstrate how to use the setState callback. Can you move the navigate function to where you actually use setState?
– Toby
Nov 22 at 16:59
I'm calling setSidenav method which is updating state in my React Context API
– AnneJoday
Nov 22 at 17:02
I see that. Can you callnavigate()as a callback using the code in my answer? Doesnavigate()have to be in your stateless component?
– Toby
Nov 22 at 17:06
Ah ok, so this worked. data.setSidenav(newPath, () =>{ navigate(suggestion.path)})
– AnneJoday
Nov 22 at 17:09
This is a stateless component. I'm not setting state here. I'm trying to setState on my global state which is why I'm using React Context API. So not sure how I could do a setState.
– AnneJoday
Nov 22 at 16:57
This is a stateless component. I'm not setting state here. I'm trying to setState on my global state which is why I'm using React Context API. So not sure how I could do a setState.
– AnneJoday
Nov 22 at 16:57
You haven't posted the code where you actually setState, this answer is simply to demonstrate how to use the setState callback. Can you move the navigate function to where you actually use setState?
– Toby
Nov 22 at 16:59
You haven't posted the code where you actually setState, this answer is simply to demonstrate how to use the setState callback. Can you move the navigate function to where you actually use setState?
– Toby
Nov 22 at 16:59
I'm calling setSidenav method which is updating state in my React Context API
– AnneJoday
Nov 22 at 17:02
I'm calling setSidenav method which is updating state in my React Context API
– AnneJoday
Nov 22 at 17:02
I see that. Can you call
navigate() as a callback using the code in my answer? Does navigate() have to be in your stateless component?– Toby
Nov 22 at 17:06
I see that. Can you call
navigate() as a callback using the code in my answer? Does navigate() have to be in your stateless component?– Toby
Nov 22 at 17:06
Ah ok, so this worked. data.setSidenav(newPath, () =>{ navigate(suggestion.path)})
– AnneJoday
Nov 22 at 17:09
Ah ok, so this worked. data.setSidenav(newPath, () =>{ navigate(suggestion.path)})
– AnneJoday
Nov 22 at 17:09
|
show 1 more 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53435209%2fset-state-then-do-a-redirect-navigate%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
You haven't included any details about how or why context isn't working, if you can include an error message or symptom I might be able to help.
– Toby
Nov 22 at 16:50
Where are you declaring your context initially?
– Toby
Nov 22 at 16:57
MenuItem doesn't actually have any content inside it. But it's tricky to troubleshoot without seeing more code.
– Toby
Nov 22 at 17:01