Generating a unique ID in React js is helpful in component identifiers in React applications. It can be used to separate and identify database records and as a key in many applications. We can create unique IDs in React JS with the simple methods stated below.
Table of Content
Installation Steps
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure
After creating, your project directory should look like this.
Project Directory
Approach 1: Using UUId
We will be using Uuid V4 in this tutorial. Uuid v4 is a React library or package that creates a universally unique identifier (UUID). It is a 128-bit unique identifier generator. The bits that comprise a UUID v4 are generated randomly and with no inherent logic. Because of this, there is no way to identify information about the source by looking at the UUID, so it is very unique.
Install UUID v4 using the following command:
npm install uuidv4
Example: Using uuidv4 to get a new unique if on every reload or re-render. also can be sliced into smallar string if required.
Javascript
// App.js//import uuid v4import { v4 as uuid } from "uuid";import "./App.css";export default function App() { // New unique id const unique_id = uuid(); // Get first 8 characters using slice const small_id = unique_id.slice(0, 8); return ( <div className="App"> <h1 className="neveropen">neveropen</h1> <div className="container"> <div className="item"> <h2>Unique ID</h2> <p>{unique_id}</p> <h3>Sliced Unique ID</h3> <p>{small_id}</p> </div> </div> </div> );} |
CSS
/* App.css */.App { text-align: center; overflow-y: scroll;}.neveropen { color: green;}.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}.item { min-width: 10rem; text-align: left;} |
Step to run the application: To run the app, use the following command
npm start
Output: Now if you run the app, the unique id will be shown below the heading. Each time you refresh, a new and unique id will be shown with no repetition.
Approach 2: Using timestamps
Using Time stamps is a simple method to create a unique id.It is globally applicable and kept on increasing continuously. By converting it according to the needs it can be a good option for using as a unique id.
Example: Time stamp of current time is converted to alphanumeric and used as a unique id.
Javascript
// App.jsimport React from "react";import "./App.css";function getUID() { // Get the timestamp and convert // it into alphanumeric input return Date.now().toString(36);}export default function App() { // New unique id let day = getUID(); return ( <div className="App"> <h1 className="neveropen">neveropen</h1> <div className="container"> <div className="item"> <h2>Unique ID</h2> <p>{day}</p> </div> </div> </div> );} |
CSS
/* App.css */.App { text-align: center; overflow-y: scroll;}.neveropen { color: green;}.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}.item { min-width: 10rem; text-align: left;} |
Step to run the application: To run the app, use the following command
npm start
Output: Now if you run the app, the unique id will be shown below the heading. Each time you refresh, a new and unique id will be shown with no repetition.
