Build an Event RSVP - Build an Event RSVP

JavaScript
1

Tell us what’s happening:

I can’t pass test 18. After submission, there should be an element on the page indicating the state of the additional guests input. The code does it but the test fails
Help please:)

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();

    setSubmittedData({
      name,
      email,
      attendees,
      dietary,
      bringingGuests,
    });

    setName('');
    setEmail('');
    setAttendees(1);
    setDietary('');
    setBringingGuests(false);
  }

  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={e => setAttendees(e.target.value)}
              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="label-container">
          <h3>Confirmation</h3>
          <p><strong>Name:</strong> {submittedData.name}</p>
          <p><strong>Email:</strong> {submittedData.email}</p>
          <p><strong>Number of Attendees:</strong> {submittedData.attendees}</p>
          <p><strong>Dietary Preferences:</strong> {submittedData.dietary || 'None'}</p>
          <p><strong>Bringing Additional Guests?:</strong> {submittedData.bringingGuests ? 'Yes' : 'No'}</p>
        </div>
      )}
    </div>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Build an Event RSVP - Build an Event RSVP

2

Check the example again, for what it’s supposed to show. It isn’t supposed to say “Confirmation”

3

Generally you need to have all the text exactly the same as the example. Although that doesn’t appear to be the problem here.

There is some kind of state mis-match. For example, if I change this:

 <p>Bringing additional guests: {bringingGuests ? 'Yes' : 'No'}</p>

The output does not match.

On submitting the form you are resetting that variable to false.

1 Like
4

Thank you:), that was the problem — the form data wasn’t being retained.

1 Like