Build an Event RSVP - Build an Event RSVP

JavaScript
1

Tell us what’s happening:

  1. Submitting the form should not result in the page reloading.
    Failed, I have tested the page its working and e.preventDefault(); is working [ logged the value], i have referred the forum and tried e.target.checkValidity, still 13 step is failed.

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: styles.css */
.container{

   margin: 5px;
   padding: 5px;
   align-items: center;

}

/* file: index.jsx */
const { useState, form } = React;

export function EventRSVPForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [attendees, setAttendees] = useState("");
  const [guests, setGuests] = useState(false);
  const [dietary, setDietary] = useState("");
  const [displayResults, setDisplayResults] = useState(false);

  function handleName(e) {
    setName(e.target.value);
  }

  function handleEmail(e) {
    setEmail(e.target.value);
  }
  function handleAttendees(e) {
    setAttendees(e.target.value);
  }
  function handleGuests(e) {
    setGuests(e.target.value);
  }

  function handleSubmit(e){
    e.preventDefault();

    //if (e.target.checkValidity())
    //  setDisplayResults(true);

    setName(e.target.name.value);
    setEmail(e.target.email.value);
    setAttendees(e.target.attendees.value);

    if (e.target.guests.checked) {
      setGuests("Yes");
    } else {
      setGuests("No");
    }
    setDietary(e.target.dietary.value);
    setDisplayResults(true);
  }

  return (
    <>
    <div id="container" className="container">
      <h1 style={{textAlign: 'center'}}>Event RSVP Form</h1>
      <form onSubmit={handleSubmit}>
        <section>
          <label>Name: </label>
          <input type="text" name="name" value={name} onChange={handleName} required/>
          <br/><br/>
          <label>Email: </label>
          <input type="email" name="email" value={email} onChange={handleEmail}   required/>
          <br/><br/>
          <label>Number of Attendees: </label>
          <input type="number"  name="attendees" value={attendees} onChange={handleAttendees}  required/>
          <br/><br/>
          <label>Dietary Preferences: </label>
          <input type="text" name="dietary" />
          <br/><br/>
          <label>Addtional Guests: </label>
          <input type="checkbox" name="guests" value={guests} onChange={handleGuests}  />
        </section>
        <br/><br/>
        <button type="submit">Submit RSVP</button>
      </form>
         <br/><br/>
    </div>
    <div>
      { displayResults && (
        <div>
          <label>RSVP Submitted!</label><br/>
          <label>Name: {name}</label><br/>
          <label>Email: {email}</label><br/>
          <label>Number of attendees: {attendees}</label><br/>
          <label>Dietary preferences: {dietary || 'None'}</label><br/>
          <label>Bringing additional guests: {guests}</label>
        </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/141.0.0.0 Safari/537.36

Challenge Information:

Build an Event RSVP - Build an Event RSVP

2

If you take a look at the browser’s console, there’s error appearing when tests are running.

TypeError: Cannot read properties of undefined (reading ‘name’)

It looks the way test is triggering the form submission does not have the target as form.