Tell us what’s happening:
- After submission, there should be an element on the page indicating the state of the additional guests input.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: index.jsx */
const { useState } = React;
export function EventRSVPForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [attendees, setAttendees] = useState(1);
const [dietary, setDietary] = useState('');
const [bringingGuests, setBringingGuests] = useState(false);
const [submittedData, setSubmittedData] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
const attendeesNumber = Number(attendees);
if (attendeesNumber < 1) {
alert('Number of Attendees must be at least 1.');
return;
}
// Capture the state of the inputs exactly as they are at submission
setSubmittedData({
name,
email,
dietary: dietary || 'None',
// Requirement 1: State of the number of attendees input
attendeeCount: attendeesNumber,
// Requirement 2: State of the additional guests checkbox
guestCheckboxStatus: bringingGuests ? 'Checked' : 'Unchecked'
});
// Resetting form fields for the next entry
setName('');
setEmail('');
setAttendees(1);
setDietary('');
setBringingGuests(false);
}
const handleAttendeesChange = (e) => {
const value = e.target.value;
if (value === '') {
setAttendees('');
return;
}
const numberValue = Number(value);
setAttendees(numberValue);
}
return (
<div className="container">
<h1>Event RSVP Form</h1>
<form onSubmit={handleSubmit}>
<div className="label-container">
<label>Name:
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
required
/>
</label>
</div>
<div className="label-container">
<label>Email:
<input
type="email"
value={email}
onChange={e => setEmail(e.target.value)}
required
/>
</label>
</div>
<div className="label-container">
<label>Number of Attendees:
<input
type="number"
value={attendees}
onChange={handleAttendeesChange}
min="1"
required
/>
</label>
</div>
<div className="label-container">
<label>Dietary Preferences (optional):
<input
type="text"
value={dietary}
onChange={e => setDietary(e.target.value)}
/>
</label>
</div>
<div className="label-container2">
<label>Bringing additional guests?:
<input
type="checkbox"
checked={bringingGuests}
onChange={e => setBringingGuests(e.target.checked)}
/>
</label>
</div>
<div className="label-container2">
<button type="submit">Submit RSVP</button>
</div>
</form>
---
{submittedData && (
<div className="submission-summary" style={{ marginTop: '20px', padding: '15px', border: '2px solid #eee' }}>
<h3>RSVP Confirmation</h3>
<p><strong>Name:</strong> {submittedData.name}</p>
{/* Requirement 1: Indicating the state of the number of attendees input */}
<p id="attendee-state-indicator">
<strong>Attendees Input State:</strong> {submittedData.attendeeCount} (Confirmed)
</p>
{/* Requirement 2: Indicating the state of the additional guests input */}
<p id="guest-checkbox-state-indicator">
<strong>Additional Guests Checkbox State:</strong> {submittedData.guestCheckboxStatus}
</p>
<p><strong>Email:</strong> {submittedData.email}</p>
<p><strong>Dietary:</strong> {submittedData.dietary}</p>
</div>
)}
</div>
);
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36
Challenge Information:
Build an Event RSVP - Build an Event RSVP