useId() Hook - web dev simplified

Folder Structure

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

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`} /> 

        </>
    )
}

Output