Build an Event RSVP - Build an Event RSVP

JavaScript
1

Tell us what’s happening:

Hi All. I am failling test 19 :
// running tests
19. After submission, there should be an element on the page indicating the state of the additional guests input.
// tests completed
My console.log(submitttedData) first outputs null on clicking the Submit button on the first attempt then after that it outputs the submittedData object. Please help

Your code so far

← file: index.html → 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Event RSVP</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { EventRSVPForm } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(
        <EventRSVPForm />
      );
    </script>
  </body>
</html>

← file: index.html → 

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: grey;
}

.form-wrap{ background-color: white;
  width: 400px;
  padding: 20px;
  border: 1px solid black;
  box-shadow: 5px 5px 10px black;
  
}

.form-wrap h2,
.form-wrap p {
  text-align: center;
}

.form-wrap p {
  position: relative;
  top: -18px;
}

label{
  font-size:1,9rem;
}

input{
  font-size:1.3rem
}

button{
  font-size:1.5rem;
  background:lime;
}

.confirmationMsg p{
  text-align:left;
}

/* file: index.jsx */

const { useState } = React;

export function EventRSVPForm() {

const [formData, setFormData] = useState({
    name: "",
    email: "",
    attendees: "",
    dietary: "",
    hasGuests: false,   
  });

  const [submittedData, setSubmittedData] = useState(null);
 
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value,
    }));
   
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();    
    setSubmittedData(formData);
       
    setFormData({
      name: "",
      email: "",
      attendees: "",
      dietary: "",
      hasGuests: false,     
    });
    console.log(submittedData) /*This is the console.log statement am reffering to  */
  };

return (

<div className='form-wrap'   >
      <h2>Event RSVP Form</h2>
      <p>Please input all fields</p>

      <form onSubmit={handleSubmit} method="post" action="https://superhero-application-form.freecodecamp.org">
        <label>
         Enter Your Name and Surname
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            placeholder="Name"
            required
          />
        </label>
        <br /><br />

        <label>
          Enter Your Email Address
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            placeholder="Email"
            required
          />
        </label>
        <br /><br />

        <label>
          Number of Attendees
          <input
            type="number"
            name="attendees"
            min="1"
            value={formData.attendees}
            onChange={handleChange}
            placeholder="Number of Attendees"
            required
          />
        </label>
        <br /><br />

        <label>
          Dietary Preferences
          <input
            type="text"
            name="dietary"
            value={formData.dietary}
            onChange={handleChange}
            placeholder="Any dietary Preferences"
          
          />
        </label>
        <br /><br />

        {/* Checkbox for additional guests */}
        <label>
          <input
            type="checkbox"
            name="hasGuests"
            checked={formData.hasGuests}
            onChange={handleChange}
          />
          I have additional guests
        </label>
        <br /><br />   

        <button type="submit">Submit</button>      
    
      {submittedData && (
        <div className="confirmationMsg" >
         
            <p>RSVP Submitted!</p>
            <p>Name: {submittedData.name}</p>
            <p>Email: {submittedData.email}</p>
            <p>Number of attendees: {submittedData.attendees}</p>
            <p>Dietary preferences: {submittedData.dietary}</p>
            <p>Bringing additional guests: {submittedData.hasGuests ? "Yes" : "No"}</p>
          
        </div>
            )}
        </form>
        </div>     
 
  ); 

}

Your browser information:

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

Challenge Information:

Build an Event RSVP - Build an Event RSVP

2

the test is checking the value of the text you have printed out to the DOM nodes.
In your case, your handleChange is updating the the formData state. So the way the test checks is that it sets the checkbox and sees what your DOM elements change to become.

but your element is not relying on the state that is changing (formData). It is relying on submittedData which is not correct. Try changing to formData as that is what you are actually modifying when the checkbox is modified.
(and remember the rule of react state: never write a new state, when an existing state already has the information we need)

3

@hbar1st I understand thank you very much for your explanation it is now passing. Thanks !

1 Like