I have a React Component, which has a button and when clicked a sidePane is opened. I would like to first refresh the page, wait till it completely gets refreshed and then open the sidepane. Here is my current code:
const refreshPage = () => {
window.location.reload();
}
<button onClick={() => {
refreshPage(); // Refreshing here and then opening the sidePane
setIsPaneOpen(true);
}} className="btn-default">Click me</button>
I have tried sleep and wait, but it depends on all factors right? so it cannot be trusted.
If the page is refreshed, everything that was stored in memory (all your variables, component states, etc.) is lost. You need to use localStorage to know if the sidebar needs to be opened when the page is loaded and the component is mounted:
useEffect(() => {
// This runs when the component is mounted (after the page loads).
if (localStaorage.getItem('openSidebarOnLoad') === 'true') {
setIsPaneOpen(true);
localStorage.removeItem('openSidebarOnLoad');
}
}, []);
const handleButtonClick = () => {
localStorage.setItem('openSidebarOnLoad', true);
window.location.reload();
};
<button onClick={ handleButtonClick } className="btn-default">Click me</button>