How to Create an Unique ID in ReactJS ?

Generating an 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.

How to Create Unique ID in React

We can create unique id in React With the help of UUID package, that generates unique ids, and we can also use the timestamps for the unique id as it is not repeating and keeps on changing. Generating unique IDs is essential for keying list items in React.

These method are given below in detail.

Steps to Create React App

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.

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

use the following command in the terminal in project directory

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.

/* 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;
}

// 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>
    );
}

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.

/* 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;
}

// 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>
    );
}

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.