38 lines
904 B
JavaScript
38 lines
904 B
JavaScript
import {useId, useState} from "react";
|
|
import "../index.css"
|
|
|
|
/**
|
|
* The email input element. A unique ID is generated. This element will
|
|
* fill the entire width of its parent. (w-full)
|
|
* @param {onChange}
|
|
* @returns {JSX.Element}
|
|
* @constructor
|
|
*/
|
|
export default function UserInput({onChange}) {
|
|
// Example of the controlled input state pattern
|
|
const [email, setEmail] = useState("");
|
|
|
|
// Generate ID for the input element
|
|
const id = useId();
|
|
|
|
/**
|
|
* Update the password controlled state
|
|
* @param event {InputEvent}
|
|
*/
|
|
const updateEmail = (event) => {
|
|
const email = event.target.value;
|
|
setEmail(email);
|
|
onChange(email);
|
|
}
|
|
|
|
return <input
|
|
type="text"
|
|
name={id}
|
|
value={email}
|
|
onInput={updateEmail}
|
|
placeholder="Username"
|
|
required={true}
|
|
className="border border-gray-300 rounded-sm py-2 px-4 placeholder:italic w-full my-2"
|
|
/>
|
|
}
|