Create a Sign up form using React JS with state and functions. The list of functionalities that is to be built is as follows:

Question

Display Sign up form with username, email, password, confirm password and submit button on the screen.
Users can input the values on the form.
When the user clicks on the "Submit button", Display an alert message that has the values of the id, username, password and confirms password. You can include a message like an error message when the confirm password/password don’t match what is in the list

Answer 1

import React, { useState } from 'react';

const SignUpForm = () => {
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');

const handleSubmit = (event) => {
event.preventDefault();

if (password !== confirmPassword) {
alert('Passwords do not match!');
} else {
alert(`Username: ${username} \nEmail: ${email} \nPassword: ${password}`);
}
};

return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input
type="text"
value={username}
onChange={(event) => setUsername(event.target.value)}
/>
</label>
<label>
Email:
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
</label>
<label>
Password:
<input
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
/>
</label>
<label>
Confirm Password:
<input
type="password"
value={confirmPassword}
onChange={(event) => setConfirmPassword(event.target.value)}
/>
</label>
<button type="submit">Submit</button>
</form>
);
};

export default SignUpForm;