Create a Sign up form using React JS with state and functions. The list of functionalities that is to be built is as follows:
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
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;
Sure! Here's an example of how you can create a Sign up form using React JS with state and functions:
1. First, make sure you have React JS installed and set up in your project.
2. Create a new file called `SignUpForm.js` and add the following code:
```
import React, { useState } from 'react';
function SignUpForm() {
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (password !== confirmPassword) {
alert("Passwords don't match!");
return;
}
alert(`Username: ${username}, Email: ${email}, Password: ${password}`);
// You can perform any other actions here, like sending data to a server
};
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
</label>
<br />
<label>
Email:
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
</label>
<br />
<label>
Password:
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
</label>
<br />
<label>
Confirm Password:
<input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
export default SignUpForm;
```
3. Once you have the `SignUpForm.js` component, you can import and use it wherever you want in your application. For example, in your `App.js` file:
```
import React from 'react';
import SignUpForm from './SignUpForm';
function App() {
return (
<div>
<h1>Sign Up Form</h1>
<SignUpForm />
</div>
);
}
export default App;
```
4. Start your React app and you should see the Sign up form with the required fields. Try entering values and clicking the Submit button. If the passwords don't match, you will see an alert message indicating the error. Otherwise, an alert message will display the entered values.
That's it! You now have a Sign up form with React JS that handles state and functions. Feel free to customize it further based on your specific needs.