import React, { useState } from 'react';
function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleEmailChange = (event) => {
setEmail(event.target.value);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
// Handle form submission with 'email' and 'password'
console.log('Email:', email);
console.log('Password:', password);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
value={email}
onChange={handleEmailChange}
required
/>
</div>
<div>
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
value={password}
onChange={handlePasswordChange}
required
/>
</div>
<button type="submit">Login</button>
</form>
);
}
export default LoginForm;
To keep everything in sync, state and onChange events are used with React Forms.
<Start Code Here
Uncontrolled form fields maintain their own state, while controlled form fields have their state managed by a parent component.