How to useUUId in ReactJS
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="geeks">w3wiki</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.
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.
Table of Content
- Using UUId
- Using timestamps
Contact Us