0

I am new to React so I apologise in advance. How can I stop unmounting a component in React please. I would like to warn the user in my application of losing all the unsaved changes before leaving the form editing page. Is that possible please?

It is a single page application that renders components based on the current state of the application (Not using React-router)

Many thanks in advance

Zuzu JH
  • 607
  • 2
  • 10
  • 22
  • Does this answer your question? [Detecting user leaving page with react-router](https://stackoverflow.com/questions/32841757/detecting-user-leaving-page-with-react-router) – Yousaf Oct 24 '20 at 19:41
  • Hi @Yousaf. Unfortunately, I am not using react-router, so I can't really apply it. It a single page application that renders components based on the current state of the application, – Zuzu JH Oct 24 '20 at 20:05
  • Maybe this is what you are looking for https://stackoverflow.com/questions/821011/prevent-a-webpage-from-navigating-away-using-javascript – lissettdm Oct 24 '20 at 21:29
  • 1
    @ZuzuJH, Does the component is destroyed because user leave the page? – lissettdm Oct 24 '20 at 21:33
  • @lissettdm Unfortunately, that wouldn't work in my case. As the URL doesn't change in my case. The component in my case gets re-rendered because the user clicks on a different item. so that attributes of the newly clicked item gets displayed in the form instead. Which automatically discards the changes that the user made in the previous item if they didn't save them. Is there a way of showing "Unsaved Changes Will be Discard, Are you sure?" before the component re-renders. I.e is there a way of stopping the re-rendering? – Zuzu JH Oct 25 '20 at 07:16

0 Answers0