Mixing
Setting and getting state from session storage react
So I have a sidenav that has expansion panels that open. I'm setting the state on which expansion panel is open. But on click of one of the sidenav, I get redirected to the list item path and the sidenav returns to original state. on the redirect I'd like for the part of the sidenav that was open to persist. I'm trying to do it like this. I'm not sure why it's not working.
handleOpen = path => {
this.setState({ openPath: path });
sessionStorage.setItem('path', this.state.openPath);
};
class Sidebar extends React.Component {
constructor(props){
super(props);
let getPath = JSON.parse(sessionStorage.getItem('path'))
this.state = {
openPath: getPath
};
}
javascript reactjs state
edited Nov 20 '18 at 2:11
zynkn
3,90821030
asked Nov 20 '18 at 2:08
AnneJodayAnneJoday
246
|
show 8 more comments
So I have a sidenav that has expansion panels that open. I'm setting the state on which expansion panel is open. But on click of one of the sidenav, I get redirected to the list item path and the sidenav returns to original state. on the redirect I'd like for the part of the sidenav that was open to persist. I'm trying to do it like this. I'm not sure why it's not working.
handleOpen = path => {
this.setState({ openPath: path });
sessionStorage.setItem('path', this.state.openPath);
};
class Sidebar extends React.Component {
constructor(props){
super(props);
let getPath = JSON.parse(sessionStorage.getItem('path'))
this.state = {
openPath: getPath
};
}
javascript reactjs state
edited Nov 20 '18 at 2:11
zynkn
3,90821030
asked Nov 20 '18 at 2:08
AnneJodayAnneJoday
246
Provide an initial value togetPathandsetStatecalls are asynchronous. Try puttingsessionStorage.setItem('path', this.state.openPath);in the callback ofsetState.
– Hassan Imam
Nov 20 '18 at 2:16
have you considered using react router? it can be integrated into redux (or just your app state if not using redux) and it will take care of which route you're on and persist that data internally so you don't have to
– duxfox--
Nov 20 '18 at 2:17
@HassanImam hi sorry, I didn't quite understand that. Could you give me an example?
– AnneJoday
Nov 20 '18 at 2:17
@duxfox-- yes, the problem is I am using Gatsby which is a static site generator using react router under the hood. So I'm not able to configure my own routes, it kind of does that on its own based on its own createPages API.
– AnneJoday
Nov 20 '18 at 2:18
Update yourhandleOpentothis.setState({openPath: path}, () => sessionStorage.setItem('path', this.state.openPath));
– Hassan Imam
Nov 20 '18 at 2:21
|
show 8 more comments
So I have a sidenav that has expansion panels that open. I'm setting the state on which expansion panel is open. But on click of one of the sidenav, I get redirected to the list item path and the sidenav returns to original state. on the redirect I'd like for the part of the sidenav that was open to persist. I'm trying to do it like this. I'm not sure why it's not working.
handleOpen = path => {
this.setState({ openPath: path });
sessionStorage.setItem('path', this.state.openPath);
};
class Sidebar extends React.Component {
constructor(props){
super(props);
let getPath = JSON.parse(sessionStorage.getItem('path'))
this.state = {
openPath: getPath
};
}
javascript reactjs state
edited Nov 20 '18 at 2:11
zynkn
3,90821030
asked Nov 20 '18 at 2:08
AnneJodayAnneJoday
246
So I have a sidenav that has expansion panels that open. I'm setting the state on which expansion panel is open. But on click of one of the sidenav, I get redirected to the list item path and the sidenav returns to original state. on the redirect I'd like for the part of the sidenav that was open to persist. I'm trying to do it like this. I'm not sure why it's not working.
handleOpen = path => {
this.setState({ openPath: path });
sessionStorage.setItem('path', this.state.openPath);
};
class Sidebar extends React.Component {
constructor(props){
super(props);
let getPath = JSON.parse(sessionStorage.getItem('path'))
this.state = {
openPath: getPath
};
}
javascript reactjs state
javascript reactjs state
edited Nov 20 '18 at 2:11
zynkn
3,90821030
asked Nov 20 '18 at 2:08
AnneJodayAnneJoday
246
edited Nov 20 '18 at 2:11
zynkn
3,90821030
asked Nov 20 '18 at 2:08
AnneJodayAnneJoday
246
edited Nov 20 '18 at 2:11
zynkn
3,90821030
edited Nov 20 '18 at 2:11
zynkn
3,90821030
edited Nov 20 '18 at 2:11
zynkn
3,90821030
3,90821030
asked Nov 20 '18 at 2:08
AnneJodayAnneJoday
246
asked Nov 20 '18 at 2:08
AnneJodayAnneJoday
246
asked Nov 20 '18 at 2:08
AnneJodayAnneJoday
246
246
Provide an initial value togetPathandsetStatecalls are asynchronous. Try puttingsessionStorage.setItem('path', this.state.openPath);in the callback ofsetState.
– Hassan Imam
Nov 20 '18 at 2:16
have you considered using react router? it can be integrated into redux (or just your app state if not using redux) and it will take care of which route you're on and persist that data internally so you don't have to
– duxfox--
Nov 20 '18 at 2:17
@HassanImam hi sorry, I didn't quite understand that. Could you give me an example?
– AnneJoday
Nov 20 '18 at 2:17
@duxfox-- yes, the problem is I am using Gatsby which is a static site generator using react router under the hood. So I'm not able to configure my own routes, it kind of does that on its own based on its own createPages API.
– AnneJoday
Nov 20 '18 at 2:18
Update yourhandleOpentothis.setState({openPath: path}, () => sessionStorage.setItem('path', this.state.openPath));
– Hassan Imam
Nov 20 '18 at 2:21
|
show 8 more comments
Provide an initial value togetPathandsetStatecalls are asynchronous. Try puttingsessionStorage.setItem('path', this.state.openPath);in the callback ofsetState.
– Hassan Imam
Nov 20 '18 at 2:16
have you considered using react router? it can be integrated into redux (or just your app state if not using redux) and it will take care of which route you're on and persist that data internally so you don't have to
– duxfox--
Nov 20 '18 at 2:17
@HassanImam hi sorry, I didn't quite understand that. Could you give me an example?
– AnneJoday
Nov 20 '18 at 2:17
@duxfox-- yes, the problem is I am using Gatsby which is a static site generator using react router under the hood. So I'm not able to configure my own routes, it kind of does that on its own based on its own createPages API.
– AnneJoday
Nov 20 '18 at 2:18
Update yourhandleOpentothis.setState({openPath: path}, () => sessionStorage.setItem('path', this.state.openPath));
– Hassan Imam
Nov 20 '18 at 2:21
Provide an initial value to
getPath and setState calls are asynchronous. Try putting sessionStorage.setItem('path', this.state.openPath); in the callback of setState.– Hassan Imam
Nov 20 '18 at 2:16
Provide an initial value to
getPath and setState calls are asynchronous. Try putting sessionStorage.setItem('path', this.state.openPath); in the callback of setState.– Hassan Imam
Nov 20 '18 at 2:16
have you considered using react router? it can be integrated into redux (or just your app state if not using redux) and it will take care of which route you're on and persist that data internally so you don't have to
– duxfox--
Nov 20 '18 at 2:17
have you considered using react router? it can be integrated into redux (or just your app state if not using redux) and it will take care of which route you're on and persist that data internally so you don't have to
– duxfox--
Nov 20 '18 at 2:17
@HassanImam hi sorry, I didn't quite understand that. Could you give me an example?
– AnneJoday
Nov 20 '18 at 2:17
@HassanImam hi sorry, I didn't quite understand that. Could you give me an example?
– AnneJoday
Nov 20 '18 at 2:17
@duxfox-- yes, the problem is I am using Gatsby which is a static site generator using react router under the hood. So I'm not able to configure my own routes, it kind of does that on its own based on its own createPages API.
– AnneJoday
Nov 20 '18 at 2:18
@duxfox-- yes, the problem is I am using Gatsby which is a static site generator using react router under the hood. So I'm not able to configure my own routes, it kind of does that on its own based on its own createPages API.
– AnneJoday
Nov 20 '18 at 2:18
Update your
handleOpen to this.setState({openPath: path}, () => sessionStorage.setItem('path', this.state.openPath));– Hassan Imam
Nov 20 '18 at 2:21
Update your
handleOpen to this.setState({openPath: path}, () => sessionStorage.setItem('path', this.state.openPath));– Hassan Imam
Nov 20 '18 at 2:21
|
show 8 more comments
1 Answer
1
active
oldest
votes
You should probably show at least how the component is used but at first glance:
sessionStorage.setItem('path', this.state.openPath);
needs to be
sessionStorage.setItem('path', JSON.stringify(this.state.openPath));
also I'd reverse these lines:
handleOpen = path => {
this.setState({ openPath: path });
sessionStorage.setItem('path', this.state.openPath);
};
to
handleOpen = path => {
sessionStorage.setItem('path', this.state.openPath);
this.setState({ openPath: path });
};
It shouldn't matter since Javascript is single threaded but at least stylistically I like to make setState the last expression in any handlers.
answered Nov 20 '18 at 2:18
bknightsbknights
7,8812820
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%2f53385219%2fsetting-and-getting-state-from-session-storage-react%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
You should probably show at least how the component is used but at first glance:
sessionStorage.setItem('path', this.state.openPath);
needs to be
sessionStorage.setItem('path', JSON.stringify(this.state.openPath));
also I'd reverse these lines:
handleOpen = path => {
this.setState({ openPath: path });
sessionStorage.setItem('path', this.state.openPath);
};
to
handleOpen = path => {
sessionStorage.setItem('path', this.state.openPath);
this.setState({ openPath: path });
};
It shouldn't matter since Javascript is single threaded but at least stylistically I like to make setState the last expression in any handlers.
answered Nov 20 '18 at 2:18
bknightsbknights
7,8812820
add a comment |
You should probably show at least how the component is used but at first glance:
sessionStorage.setItem('path', this.state.openPath);
needs to be
sessionStorage.setItem('path', JSON.stringify(this.state.openPath));
also I'd reverse these lines:
handleOpen = path => {
this.setState({ openPath: path });
sessionStorage.setItem('path', this.state.openPath);
};
to
handleOpen = path => {
sessionStorage.setItem('path', this.state.openPath);
this.setState({ openPath: path });
};
It shouldn't matter since Javascript is single threaded but at least stylistically I like to make setState the last expression in any handlers.
answered Nov 20 '18 at 2:18
bknightsbknights
7,8812820
add a comment |
You should probably show at least how the component is used but at first glance:
sessionStorage.setItem('path', this.state.openPath);
needs to be
sessionStorage.setItem('path', JSON.stringify(this.state.openPath));
also I'd reverse these lines:
handleOpen = path => {
this.setState({ openPath: path });
sessionStorage.setItem('path', this.state.openPath);
};
to
handleOpen = path => {
sessionStorage.setItem('path', this.state.openPath);
this.setState({ openPath: path });
};
It shouldn't matter since Javascript is single threaded but at least stylistically I like to make setState the last expression in any handlers.
answered Nov 20 '18 at 2:18
bknightsbknights
7,8812820
You should probably show at least how the component is used but at first glance:
sessionStorage.setItem('path', this.state.openPath);
needs to be
sessionStorage.setItem('path', JSON.stringify(this.state.openPath));
also I'd reverse these lines:
handleOpen = path => {
this.setState({ openPath: path });
sessionStorage.setItem('path', this.state.openPath);
};
to
handleOpen = path => {
sessionStorage.setItem('path', this.state.openPath);
this.setState({ openPath: path });
};
It shouldn't matter since Javascript is single threaded but at least stylistically I like to make setState the last expression in any handlers.
answered Nov 20 '18 at 2:18
bknightsbknights
7,8812820
edited Nov 20 '18 at 4:42
answered Nov 20 '18 at 2:18
bknightsbknights
7,8812820
answered Nov 20 '18 at 2:18
bknightsbknights
7,8812820
answered Nov 20 '18 at 2:18
bknightsbknights
7,8812820
7,8812820
add a comment |
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%2f53385219%2fsetting-and-getting-state-from-session-storage-react%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
Provide an initial value to
getPathandsetStatecalls are asynchronous. Try puttingsessionStorage.setItem('path', this.state.openPath);in the callback ofsetState.– Hassan Imam
Nov 20 '18 at 2:16
have you considered using react router? it can be integrated into redux (or just your app state if not using redux) and it will take care of which route you're on and persist that data internally so you don't have to
– duxfox--
Nov 20 '18 at 2:17
@HassanImam hi sorry, I didn't quite understand that. Could you give me an example?
– AnneJoday
Nov 20 '18 at 2:17
@duxfox-- yes, the problem is I am using Gatsby which is a static site generator using react router under the hood. So I'm not able to configure my own routes, it kind of does that on its own based on its own createPages API.
– AnneJoday
Nov 20 '18 at 2:18
Update your
handleOpentothis.setState({openPath: path}, () => sessionStorage.setItem('path', this.state.openPath));– Hassan Imam
Nov 20 '18 at 2:21