Wednesday, October 17, 2018

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.
React UUID Generate with examples

Sometimes we need to have a use case like the generation of Unique random identifier or UUID. UUID is a unique value which 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 that divided into five groups separated by a hyphen
GUID is a 128-bit value that divided into five groups separated by a hyphen.
This will code works on react and React Native libraries

React UUID generator

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

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
This example We are going to learn how to generate 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 UUID package into the component. 
  • This component has a local state with data of empty id
  • Defined function updateState in the component which generates 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;

Related article


EmoticonEmoticon