# How To Manage Unsaved Changes

A typical application allows its users to navigate between different components to complete different workflows. However, sometimes the user has not completed their current work before attempting to navigate elsewhere in the application. In these cases, it makes sense to prevent that navigation until the user explicitly accepts that they are leaving the current workflow and may lose unsaved changes.

Components that want to communicate the presence of their unsaved state to the framework can do so by rendering a [NavigationPrompt](/application/terra-application/components/navigation-prompt) component. When mounted, the NavigationPrompt will register itself with any and all [NavigationPromptCheckpoints](/application/terra-application/components/navigation-prompt-checkpoint) that are ancestors to it.

```jsx
import React, { useState } from 'react';
import NavigationPrompt from 'terra-application/lib/navigation-prompt';

const ExampleComponent = () => {
  const [hasPendingState, setHasPendingState] = useState(false);

  return (
    <div>
      <p>This component toggles between having and not having pending state.</p>
      <p>
        <button type="button" onClick={() => { setHasPendingState(!hasPendingState); }}>
          {hasPendingState ? 'Clear Pending State' : 'Set Pending State'}
        </button>
      </p>
      {hasPendingState ? <NavigationPrompt description="ExampleComponent" /> : undefined}
    </div>
  );
};

export default ExampleComponent;
```

Within `terra-application`, the following components respond to the presence of NavigationPrompts:

* [ApplicationBase](/application/terra-application/components/application-base) - The user will be prompted to accept or reject window unload events if NavigationPrompts have been renedered within the ApplicationBase's children.
* [ModalManager](/application/terra-application/components/modal-manager)/[SlidePanelManager](/application/terra-application/components/slide-panel-manager) - The user will be prompted to accept or reject disclosure dismissal if NavigationPrompts have been rendered within the disclosed component.
* [ApplicationNavigation](/application/terra-application/components/application-navigation) - The user will be prompted to accept or reject primary navigation and Logout selections if NavigationPrompts have been rendered within the ApplicationNavigation's children.

While these are the provided integrations, any component that navigates between stateful components can implement a [NavigationPromptCheckpoint](/application/terra-application/components/navigation-prompt-checkpoint) to utilize the same registration and prompting logic.