Create a unique ID in React JS

Hi Guys
Ok so in this post I will be giving you guys
the simple steps to create a unique reference
ID in react JS.
This has many uses such as giving a user uploaded
image a unique name for saving in a database.

Step 1:

Install UUID v4 using the following command

npm install uuidv4

Step 2:

Import the package into your component, page or code etc.

import { v4 as uuid } from 'uuid';

Step 3:

You can now assign the Uinique ID to any variable using the below code
unique_id is an example here, it can be any variable name.

const unique_id = uuid();

And voila!, you're done.

Thank you all for reading this post.
If it was helpful, please consider following :)
Until next time
Bye!

Comments

[@FelipeBHZ]

If you are reading this in 2023, you should use the react-uuid package, otherwise you are going to get errors like:

Uncaught RangeError: Maximum call stack size exceeded
at Object.exports.deprecate (util.js:75:1)

[Saleh Mubashar]

Thanks a lot for this!

[Ekaterine Mitagvaria]

I am using it in React 18 and not having such errors. Besides, seems like react-uuid is deprecated right now.

[Luis Martinez Suarez]

This has nothing to do with React