Assignments Of Day 7: Handling Forms in React
Assignment 1: Simple Contact Form
Objective: Build a contact form with name and email fields, handle form submission, and display values in an alert.
Steps:
1. Create a new React component called ContactForm.
2. Create state variables for name and email.
3. Add input fields for name and email.
4. Bind the state variables to the value attributes of the input fields.
5. Write event handlers to update state values when the user types in the input fields.
6. Implement a handleSubmit function that prevents default form submission and displays the form values in an alert.
Solution:
jsx
Copy code
import React, { useState } from 'react';
function ContactForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleNameChange = (event) => {
setName(event.target.value);
};
const handleEmailChange = (event) => {
setEmail(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert(`Name: ${name}, Email: ${email}`);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input type="text" value={name} onChange={handleNameChange} />
</div>
<div>
<label>Email:</label>
<input type="email" value={email} onChange={handleEmailChange} />
</div>
<button type="submit">Submit</button>
</form>
);
}
export default ContactForm;
Assignment 2: Form with Additional Fields (Gender and Newsletter)
Objective: Extend the form to include gender radio buttons and a newsletter checkbox. Handle all form input changes and display the values upon submission.
Steps:
1. Add radio buttons for gender (Male and Female).
2. Add a checkbox for newsletter subscription.
3. Bind each input to the corresponding state variables.
4. Handle changes for all the inputs.
5. On form submission, display all the values.
Solution:
jsx
Copy code
import React, { useState } from 'react';
function ContactForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [gender, setGender] = useState('male');
const [newsletter, setNewsletter] = useState(false);
const handleNameChange = (event) => {
setName(event.target.value);
};
const handleEmailChange = (event) => {
setEmail(event.target.value);
};
const handleGenderChange = (event) => {
setGender(event.target.value);
};
const handleNewsletterChange = () => {
setNewsletter(!newsletter);
};
const handleSubmit = (event) => {
event.preventDefault();
alert(`Name: ${name}, Email: ${email}, Gender: ${gender}, Newsletter: ${newsletter}`);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input type="text" value={name} onChange={handleNameChange} />
</div>
<div>
<label>Email:</label>
<input type="email" value={email} onChange={handleEmailChange} />
</div>
<div>
<label>Gender:</label>
<input type="radio" value="male" checked={gender === 'male'} onChange={handleGenderChange} /> Male
<input type="radio" value="female" checked={gender === 'female'} onChange={handleGenderChange} /> Female
</div>
<div>
<label>Subscribe to Newsletter:</label>
<input type="checkbox" checked={newsletter} onChange={handleNewsletterChange} />
</div>
<button type="submit">Submit</button>
</form>
);
}
export default ContactForm;
Assignment 3: Add a Phone Number Input Field and Validate It
Objective: Create a form with name, email, and phone number fields. Ensure the phone number field accepts only numbers and has a minimum length of 10 digits. Display error messages if the validation fails.
Steps:
1. Add a phone number input field.
2. Use a regular expression to validate the phone number (only numbers, and minimum length 10).
3. Display an error message if the validation fails.
4. Bind the phone number field to state and handle changes.
Solution:
jsx
Copy code
import React, { useState } from 'react';
function ContactForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [error, setError] = useState('');
const handleNameChange = (event) => {
setName(event.target.value);
};
const handleEmailChange = (event) => {
setEmail(event.target.value);
};
const handlePhoneChange = (event) => {
setPhone(event.target.value);
};
const validatePhone = (phone) => {
const phoneRegex = /^[0-9]{10}$/; // Only 10-digit phone numbers
return phoneRegex.test(phone);
};
const handleSubmit = (event) => {
event.preventDefault();
if (!validatePhone(phone)) {
setError('Phone number must be 10 digits.');
} else {
setError('');
alert(`Name: ${name}, Email: ${email}, Phone: ${phone}`);
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input type="text" value={name} onChange={handleNameChange} />
</div>
<div>
<label>Email:</label>
<input type="email" value={email} onChange={handleEmailChange} />
</div>
<div>
<label>Phone:</label>
<input type="text" value={phone} onChange={handlePhoneChange} />
{error && <span style={{ color: 'red' }}>{error}</span>}
</div>
<button type="submit">Submit</button>
</form>
);
}
export default ContactForm;