Gancho de ID de uso de ReactJS

React useId Hook se presenta para las versiones de ReactJS superiores a 18. Este hook genera ID únicos, es decir, devuelve una string que es estable tanto en el lado del servidor como en el del cliente.

Requisito previo:

• Introducción e instalación de ReactJS
• Ganchos de reacción

Sintaxis:

const id = useId()

Creando la aplicación React:

Paso 1: cree una carpeta de proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name. Suponga que ya ha instalado create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Estructura del proyecto: Se verá así:

 

Ejemplo 1: en este ejemplo, obtenemos dos identificadores únicos aleatorios del useId Hook y los almacenamos dentro de id1 e id2. Estamos importando el gancho useId de reaccionar.

Luego, dentro de la etiqueta <p>, mostramos el valor de los ID que hemos recuperado usando el enlace useId.

import { useId } from "react";
function App() {
    const id1 = useId();
    const id2 = useId();
    return (
        <div className="App">
            <p> The id1 is {id1} </p>
            <p>The id2 is {id2}</p>
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

 

:r2: y :r3: son los dos identificadores únicos respectivamente.

Ejemplo 2: estamos creando un nombre de estado usando useState Hook, que almacenará el nombre que ingresaremos en nuestro campo de entrada.

Dentro del formulario, estamos creando un campo de entrada con una función onChange que almacenará el valor del texto que ingresamos en nuestro estado de nombre. Una identificación variable almacenará la identificación única que obtenemos del gancho useId.

La función onSubmit, es decir, la función handleSumit, mostrará el nombre con la identificación como una alerta después de enviar.

import { useId, useState } from "react";
function App() {
    const id = useId();
    const [name, setName] = useState();
    const handleSubmit = () => {
        alert("id " + id + "-name : " + name);
    };
    return (
        <div className="App">
            <form onSubmit={handleSubmit}>
                <p>
                    Enter Name :{" "}
                    <input
                        id={id + "-name"}
                        onChange={(e) => setName(e.target.value)}
                        type="text"
                    />
                </p>
  
                <button type="submit"> submit</button>
            </form>
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

 

Referencia: https://reactjs.org/docs/hooks-reference.html#useid