DEV Community

AKSH DESAI
AKSH DESAI

Posted on

useId() Hook - web dev simplified

Folder Structure

Folder Image

App.js Code

import React from 'react'
import EmailForm from './EmaliForm'

const App = () => {
    return (
        <>
            <EmailForm />
            <article style={{marginBlock: "1rem"}}>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae illum, porro temporibus unde dolores voluptatem repudiandae numquam cupiditate libero repellat dolorum inventore fugit qui autem minima, natus iure atque itaque nisi eaque quod accusamus facere odio. Quam corporis officia eius odio nesciunt maxime praesentium modi, deleniti, tempore error officiis libero.
            </article>
            <EmailForm />

        </>
    )
}

export default App

Enter fullscreen mode Exit fullscreen mode

EmaliForm.js Code

import { useId } from "react"

export default function EmailForm() {
    const id = useId();
    return (
        <>
            <label htmlFor={`${id}.email`}>Email</label>
            <input type="email" id={`${id}.email`} /> 

            <br />

            <label htmlFor={`${id}.name`}>Name</label>
            <input type="email" id={`${id}.name`} /> 

        </>
    )
}
Enter fullscreen mode Exit fullscreen mode

Output

Output Image

Top comments (0)