How to determine if a user has unsaved data?

Question

React

Hello. I have a component in which info about products is rendered.
There are also prev/next buttons that can be clicked to navigate between products within the component.
That is, if we have We allow on the Banana component - Click on the prev button go to - And so on[{id: 2, name: "Apple"}, {id: 3, name: "Banana"}]
/products-setup/product-info/3
/products-setup/product-info/2

This is how it's implemented

changeContent = (action) => {
    const {productTable, routeParams: {id}} = this.props;
    const indexOfCurrentElement = productTable.data.findIndex(obj => obj.id === Number(id));
    const index = action === "next" ? indexOfElement + 1 : indexOfElement - 1;
    const previousElement = productTable.data[index];
    const path = `/products-setup/product-info/${previousElement.id}`;
    browserHistory.push(path);
  }

componentDidUpdate(prevProps){
    if(this.props.location !== prevProps.location){
      getProductById(
        this.props.routeParams.id
      )
    }
  }

That is, when we click inside the component on let's say prev, then the current product index is searched and the previous product object is taken and a request is made to obtain information about the product and a re-render is made.
Now the question is - Let's say the user went to the component, did some actions (edited the product name) and clicks on the button Previous. How can I determine that the user has unsaved data and issue a popup that before switching to the previous product, you need to save the data??
PS I can't post all the code because the confidence project

Answer 1

Broadcast a handler for changes (onChange), if something has changed, change the state from changed: false to true. Well, accordingly, in changeContent we check if this.state.changed, then we display a popup or whatever is needed there, if not, then we do nothing, let it go further.