How to generate unique IDs for form labels in React

Question

I have form elements with labels and I want to have unique IDs to link labels to elements with htmlFor attribute  Something like this   React createClass       render             const id                return                lt label htmlFor  id  gt My label lt  label gt               lt input id  id  type  text   gt                         I used to generate IDs based on this  rootNodeID but it   s unavailable since React 0 13  What is the best and or simplest way to do it now

User · Answer

You could use a library such as node-uuid for this to make sure you get unique ids.

Install using:

npm install node-uuid --save

Then in your react component add the following:

import {default as UUID} from "node-uuid";
import {default as React} from "react";

export default class MyComponent extends React.Component {   
  componentWillMount() {
    this.id = UUID.v4();
  }, 
  render() {
    return (
      <div>
        <label htmlFor={this.id}>My label</label>
        <input id={this.id} type="text"/>
      </div>
    );
  }   
}

User · Answer

Hopefully this is helpful to anyone coming looking for a universal isomorphic solution  since the checksum issue is what led me here in the first place    As said above  I ve created a simple utility to sequentially create a new id  Since the IDs keep incrementing on the server  and start over from 0 in the client  I decided to reset the increment each the SSR starts      utility to generate ids let current   0  export default function generateId  prefix      return    prefix     id  -  current        export function resetIdCounter      current   0     And then in the root component s constructor or componentWillMount  call the reset   This essentially resets the JS scope for the server in each server render   In the client it doesn t  and shouldn t  have any effect

User · Answer

I found an easy solution like this   class ToggleSwitch extends Component     static id     constructor props        super props        if  typeof ToggleSwitch id      undefined           ToggleSwitch id   0        else         ToggleSwitch id    1            this id   ToggleSwitch id         render         return            lt input id   prefix-  this id      gt

User · Answer

For the usual usages of label and input  it s just easier to wrap input into a label like this   import React from  react   const Field   props   gt       lt label gt       lt span gt  props label  lt  span gt       lt input type  text   gt     lt  label gt            It s also makes it possible in checkboxes radiobuttons to apply padding to root element and still getting feedback of click on input

User · Answer

Following up as of 2019-04-04  this seems to be able to be accomplished with the React Hooks  useState   import React    useState   from  react  import uniqueId from  lodash utility uniqueId   const Field   props   gt      const   id     useState uniqueId  myprefix-       return        lt div gt         lt label htmlFor  id  gt  props label  lt  label gt         lt input id  id  type  text   gt       lt  div gt               export default Field   As I understand it  you ignore the second array item in the array destructuring that would allow you to update id  and now you ve got a value that won t be updated again for the life of the component   The value of id will be myprefix- lt n gt  where  lt n gt  is an incremental integer value returned from uniqueId  If that s not unique enough for you  consider making your own like  function gen4       return Math random   toString 16  slice -4     function simpleUniqueId prefix      return  prefix        concat       gen4        gen4        gen4        gen4        gen4        gen4        gen4        gen4       join          or check out the library I published with this here  https   github com rpearce simple-uniqueid  There are also hundreds or thousands of other unique ID things out there  but lodash s uniqueId with a prefix should be enough to get the job done     Update 2019-07-10  Thanks to  Huong Hk for pointing me to hooks lazy initial state  the sum of which is that you can pass a function to useState that will only be run on the initial mount      before const   id     useState uniqueId  myprefix-        after const   id     useState      gt  uniqueId  myprefix-

User · Answer

This solutions works fine for me   utils newid js   let lastId   0   export default function prefix  id         lastId        return    prefix   lastId        And I can use it like this   import newId from     utils newid    React createClass       componentWillMount             this id   newId               render             return                lt label htmlFor  this id  gt My label lt  label gt               lt input id  this id  type  text   gt                         But it won   t work in isomorphic apps   Added 17 08 2015  Instead of custom newId function you can use uniqueId from lodash   Updated 28 01 2016  It   s better to generate ID in componentWillMount

User · Answer

Don t use IDs at all if you don t need to  instead wrap the input in a label like this    lt label gt     My Label     lt input type  text   gt   lt  label gt    Then you won t need to worry about unique IDs

User · Answer

The id should be placed inside of componentWillMount  update for 2018  constructor  not render  Putting it in render will re-generate new ids unnecessarily   If you re using underscore or lodash  there is a uniqueId function  so your resulting code should be something like   constructor props        super props       this id     uniqueId  prefix-       render        const id   this id    return        lt div gt           lt input id  id  type  checkbox    gt           lt label htmlFor  id  gt label lt  label gt       lt  div gt           2019 Hooks update   import React    useState   from  react   import  uniqueId from  lodash uniqueId    const MyComponent    props    gt         id will be set once when the component initially renders  but never again       unless you assigned and called the second argument of the tuple    const  id    useState  uniqueId  prefix-       return        lt div gt         lt input id  id  type  checkbox    gt         lt label htmlFor  id  gt label lt  label gt       lt  div gt

User · Answer

I create a uniqueId generator module  Typescript    const uniqueId          prefix  string    gt  string    gt      let counter   0    return  prefix  string   string   gt     prefix     counter           export default uniqueId    And use top module to generate unique ids   import React    FC  ReactElement   from  react  import uniqueId from        modules uniqueId    const Component  FC       ReactElement   gt      const  inputId    useState uniqueId  input-       return        lt label htmlFor  inputId  gt         lt span gt text lt  span gt         lt input id  inputId  type  text    gt       lt  label gt

[reactjs] How to generate unique IDs for form labels in React?

Examples related to reactjs