next.js/examples/with-fingerprintjs-pro/components/Toggler.tsx

import { PropsWithChildren, useState } from "react";

function Toggler({ children }: PropsWithChildren<{}>) {
  const [showChildren, setShowChildren] = useState(true);

  return (
    <div className="toggler">
      <p>
        You can open the Network tab in your browser Dev Tools and see new
        requests being made depending on the <b>caching algorithm</b> as you
        unmount the component with the fingerprint and mount it again thus
        calling the <code>useVisitorData</code> hook.
      </p>
      <button
        className="toggle-button"
        onClick={() => setShowChildren((show) => !show)}
      >
        {showChildren ? "Hide" : "Show"} visitor data
      </button>
      {showChildren && children}
    </div>
  );
}

export default Toggler;