How to create an unique id in ReactJS ?

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.

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 v4
import { 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="geeks">GeeksforGeeks</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;
}
.geeks {
    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.js
import 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="geeks">GeeksforGeeks</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;
}
.geeks {
    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.