How to usetimestamps in ReactJS
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="geeks">w3wiki</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.
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