How to Generate a Unique Id Global Variable that updates after event? React.js, React Router

Question

I have a React Router App with multiple Routes. I need a component that will generate an Id number onSubmit. A unique Id needs to be assigned to each submission. This component needs to be imported into multiple pages and the count needs to be consistent across these pages. The value of the variable uniqueId is updating within the component but the value of the same variable imported into the page with handleSubmit remains constant with it's initial value which makes sense but I need to be able to access the updated value of uniqueId from within each page. Is it possible to have a global variable across multiple React Router pages?

I appreciate all ideas! Thank you for your time!

import react, from 'react';
import './pages.css';

let uniqueId = 0;

export function GenId(){
  uniqueId++;
  console.log(uniqueId);
}

export default uniqueId;

handleSubmit:

import { GenId } from './genIds';
import uniqueId from './genIds';

const handleSubmit = (event) => { 
  event.preventDefault();
  toggleDisabled();
  GenId();
  console.log(uniqueId)
}

Drew's answer is great for a locally unique id, but if you want the id to be universally unique (ie. across all instances of your app) you can use the [uuid package](https://www.npmjs.com/package/uuid) more info here: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid. There's no need to save the previous one and increment because each one is unique. — Chris Hamilton, Aug 26 '22 at 18:31
@ChrisHamilton A great and completely valid point. I've amended my answer to include this as a suggestion. — Drew Reese, Aug 26 '22 at 19:26

Drew Reese · Accepted Answer · 2022-08-26T19:17:05.583

You can create a generator function to increment and return a counter value.

Example:

genId.js

function* numericalIdGenerator(seed = Date.now()) {
  while (true) yield seed++;
}

const generateNumericalId = numericalIdGenerator();

export const genId = () => generateNumericalId.next().value;

It uses Date.now() as a default starting seed value to avoid id collisions with previously generated ids, but you can use any starting number you like.

Usage:

import { genId } from "./genId";

...

const handleSubmit = (event) => {
  event.preventDefault();
  const uniqueId = genId();
  console.log({ uniqueId });
};

Example Test Code:

import { genId } from "./genId";

const ComponentA = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    const uniqueId = genId();
    console.log("ComponentA", { uniqueId });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Form A</h1>
      <button type="submit">Submit</button>
    </form>
  );
};

const ComponentB = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    const uniqueId = genId();
    console.log("ComponentB", { uniqueId });
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Form b</h1>
      <button type="submit">Submit</button>
    </form>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <ComponentA />
      <ComponentB />
    </div>
  );
}

Suggestion

The above solution only provides/guarantees uniqueness with a single app instance. If you are submitting data to some external repository then the suggestion would be to use a utility that provides truly global and unique ids, e.g. GUIDs. One such package I (and @ChrisHamilton) recommend is uuid. Its usage is nearly identical.

Example:

import { v4 as uuidV4 } from "uuid";

...

const handleSubmit = (event) => {
  event.preventDefault();
  const uniqueId = uuidV4();
  console.log({ uniqueId });
};

How to Generate a Unique Id Global Variable that updates after event? React.js, React Router

1 Answers1

Suggestion