Ch.4 Issue with Prompt

See this article: remix-run/react-router#5707

Breaking change in React 16. The example from the book works at first but then throws this error: "Warning: A history supports only one prompt at a time".

Project still works but this might confuse people as to why the prompt suddenly stopped working.

[carlrip]

Thanks for raising the issue mickersicc.
I've tried to resolve this using the suggestion in remix-run/react-router#5707 but unfortunately this didn't seem to work.

Here was my attempt:

// PromptFix.tsx

import * as React from "react";
import { Prompt } from "react-router-dom";

interface IProps {
  when: boolean;
  message: () => string;
}
interface IState {
  show: boolean;
}

class PromptFix extends React.Component<IProps, IState> {
  public constructor(props: IProps) {
    super(props);
    this.state = {
      show: false
    };
  }

  public componentDidMount() {
    this.setState({ show: this.props.when });
  }

  public componentWillUnmount() {
    this.setState({ show: false });
  }

  public render() {
    return this.state.show ? (
      <Prompt when={this.state.show} message={this.props.message} />
    ) : null;
  }
}

export default PromptFix;

// ProductPage.tsx

class ProductPage extends React.Component<Props, IState> {
  ...
  public render() {
    const product = this.state.product;
    return (
      <div className="page-container">
        <PromptFix when={!this.state.added} message={this.navAwayMessage} />
        ...
      </div>
    );
  }
  ...
}