¿Cómo generar ID únicas para etiquetas de formulario en React?

Tengo elementos de formulario con labels y quiero tener ID únicas para vincular labels a elementos con htmlForatributo. Algo como esto:

React.createClass({
    render() {
        const id = ???;
        return (
            <label htmlFor={id}>My label</label>
            <input id={id} type="text"/>
        );
    }
});

Solía generar ID basadas en this._rootNodeIDpero no está disponible desde React 0.13. ¿Cuál es la mejor y/o más sencilla forma de hacerlo ahora?

Apr 03 '15 02:04 Artem Sapegin

La identificación debe colocarse dentro de ~~componenteWillMount~~ (actualización para 2018) constructor, no render. Al insertarlo, renderse regenerarán nuevas identificaciones innecesariamente.

Si estás usando guión bajo o lodash, hay una uniqueIdfunción, por lo que el código resultante debería ser algo como:

constructor(props) {
    super(props);
    this.id = _.uniqueId("prefix-");
}

render() { 
  const id = this.id;
  return (
    <div>
        <input id={id} type="checkbox" />
        <label htmlFor={id}>label</label>
    </div>
  );
}

Actualización de ganchos de 2019:

import React, { useState } from 'react';
import _uniqueId from 'lodash/uniqueId';

const MyComponent = (props) => {
  // 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 (
    <div>
      <input id={id} type="checkbox" />
      <label htmlFor={id}>label</label>
    </div>
  );
}

Jan 27 '2016 20:01 Kabir Sarin

Actualizar reaccionar 18

React 18 ha introducido un nuevo gancho que genera una identificación única:

const id = useId();

Documentos de API de enlace: https://react.dev/reference/react/useId

Según su ejemplo, podría llamar al gancho dentro de un componente:

import React, { useId } from 'react'

function TextField = (props) => {
  // generate unique ID
  const id = useId(); 

  return (
    <>
      <label htmlFor={id}>My label</label>
      <input id={id} type="text"/>
    </>
  );
}

Mar 30 '2022 17:03 t_dom93

Esta solución funciona bien para mí.

utils/newid.js:

let lastId = 0;

export default function(prefix='id') {
    lastId++;
    return `${prefix}${lastId}`;
}

Y puedo usarlo así:

import newId from '../utils/newid';

React.createClass({
    componentWillMount() {
        this.id = newId();
    },
    render() {
        return (
            <label htmlFor={this.id}>My label</label>
            <input id={this.id} type="text"/>
        );
    }
});

Pero no funcionará en aplicaciones isomórficas.

Agregado el 17.08.2015 . En lugar de la función newId personalizada, puede utilizar UniqueId de lodash.

Actualizado el 28.01.2016 . Es mejor generar ID en formato componentWillMount.

Apr 06 '2015 06:04 Artem Sapegin