React UUID Component Generator Example | React Native UUID example

React UUID Component Generator Example | React Native UUID example

In this blog post, We will learn how to Generate Unique Identifier - UUID in react js with examples.

Sometimes, we need to have a use case like the generation of a Unique random identifier or UUID. UUID is a unique value that is not repeated. UUID will be mostly used to identify the visitor or user identification for session values and also for privacy functionality, Chat applications. GUID is a 128-bit value divided into five groups separated by a hyphen. This will code works on react and React Native libraries

You can check my previous posts

React UUID generator

React is a popular UI framework for building UI web and mobile applications UUID generation can be integrated in many ways. 1 We can write out custom code components in the application. 2 Use UUID npm package This is a popular npm package for nodejs applications.

Use uuid npm package

This is a popular npm UUID package for nodejs applications

  • Generates UUID1,2,3,4 and 5 Versions with RFC4122 standard protocol support
  • No external Dependency
  • Strong Random Unique Identifier Generation

In this example, We are going to learn how to generate a Unique ID on a button click

React Component Unique Identifier example

The following questions are answered with this example.

  • React component to generate UUID
  • Unique Id generate using button click in reactjs
  • Npm UUID example in ReactjS
  • Random Unique Id generation

Here are the steps for the example code

  • Import the UUID package into the component.
  • This component has a local state with data of empty id
  • Defined function updateState in the component which generates a Unique id using UUID.v4() and updates in component state
  • Created a button attached onClick event to a updateState function.
  • This will be called when the button is clicked by the user and generates UUID
import React, { Component } from 'react';
import './App.css';
import {default as UUID} from "uuid";
class App extends Component {
  componentWillMount() {
    this.id = UUID.v4();
  }
  constructor(props) {
    super(props);
    this.state = {
       id: ''
    }
    this.updateState = this.updateState.bind(this);
  };
  updateState() {
    this.setState({id: UUID.v4()})
 }
  render() {
    return (
      <div>
        <label>{this.state.data}</label>
        <button onClick = {this.updateState}>Click Me</button>
      </div>
    );
  }
}
export default App;