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
};
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.