I can’t pass the last tests (15 onwards) because after form submission, none of the elements appear on the page. In fact, none of them appear on the page in the first place. before submission! Somehow, the other tests pass despite this. I’m really not sure what’s wrong with my code.
<!-- 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 */
/* file: index.jsx */
const { useState } = React;
export function EventRSVPForm() {
let [name, setName] = useState("");
let [email, setEmail] = useState("");
let [attendees, setAttendees] = useState(1);
let [preferences, setPreferences] = useState("");
let [extras, setExtras] = useState(false);
let [responses, setResponses] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
setResponses({name, email, attendees, preferences, extras, responses});
setName("");
setEmail("");
setAttendees(1);
setPreferences("");
setExtras(false);
setResponses(null);
};
return <form onSubmit={handleSubmit}>
<label>Name: <input type="text" required onChange={e => setName(e.target.value)}></input></label>
<label>Email address: <input type="email" required onChange={e => setEmail(e.target.value)}></input></label>
<label>Number of attendees: <input type="number" min="1" required onChange={e => setAttendees(e.target.value)}></input></label>
<label>Dietary preferences: <input type="text"onChange={e => setPreferences(e.target.value)}></input></label>
<label>Bringing additional guests: <input type="checkbox" value="yes" onChange={e => setExtras(e.target.value)}></input></label>
<button type="submit">RSVP</button>
</form>;
}
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Build an Event RSVP - Build an Event RSVP
sanity
February 10, 2026, 5:19pm
2
Could you point to the code that’s responsible for displaying submitted data?
I think it’s this? It returns the HTML and I can’t see that it looks any different to any other working code I’ve written
sanity
February 11, 2026, 1:11pm
4
Is responses state, or any other individual state (ie. name) displayed in it?
No, because if I return this
return <form onSubmit={handleSubmit}>
<label>Name: <input type="text" required onChange={e => setName(e.target.value)}>{name}</input></label>
<label>Email address: <input type="email" required onChange={e => setEmail(e.target.value)}>{email}</input></label>
<label>Number of attendees: <input type="number" min="1" required onChange={e => setAttendees(e.target.value)}>{attendees}</input></label>
<label>Dietary preferences: <input type="text"onChange={e => setPreferences(e.target.value)}>{preferences}</input></label>
<label>Bringing additional guests: <input type="checkbox" value="yes" onChange={e => setExtras(e.target.value)}></input></label>
<button type="submit">RSVP</button>
</form>;
then all of the tests fail
Focus on coding your app and getting it to work first. Don’t run the tests until your app is working to your satisfaction.
Test your app by using it or calling functions with test data. Don’t run the automated tests until everything is working.
I’m not really sure how I can do that, considering my app does literally nothing. Nothing shows in the preview, despite most of the tests passing. What I was asking was why nothing shows in the preview when I run the app.
Ok, but:
Focus on coding your app and getting it to work first. Don’t run the tests until your app is working to your satisfaction.
I’ll stop running the tests. I still can’t work out why the app doesn’t work! I have no way of working that out while the app does absolutely nothing
Nothing happens when you click submit?
You can confirm that the required function is running by using console.log. You could use that to confirm the variables are updating as well.
What does that function do?
You should see a confirmation message displayed below the form after submitting, followed by the details provided (name, email, number of attendees, dietary preferences, and optional additional guests).
Where is the code for the confirmation message?
neat-hannah:
I think it’s this?
Here you shared code which displays the input form, not the confirmation message.
The page is taking so long to reload (or it never does) that often nothing comes up in the preview. It’s started working sometimes now, but when it doesn’t there’s nothing there. No form, no submit button, impossible to test anything (which is why I ran the tests! That was the only way to get any feedback because I couldn’t test the app manually!)
Try to reset the lesson and copy back the code you had at the start of this thread.
It still doesn’t really answer this question though:
What does that function do? (the function that runs when you click the button)
You have not implemented User Story 8
I misunderstood the user stories.
The fields populate as you enter the values then empty when you submit the form. I’m not sure how to get hold of the values when the form has already been submitted? Also, the message is never hidden.
<div id="message" hidden={responses? true: false}>
<p>RSVP Submitted!</p>
<p>Name: {name}</p>
<p>Email: {email}</p>
<p>Number of attendees: {attendees}</p>
<p>Dietary preferences: {preferences}</p>
<p>Bringing additional guests: {extras}</p>
</div>
I’ve managed to hide the message before submission, but it doesn’t have the entered values. I’m really not sure why using constants isn’t working here
const { useState } = React;
export function EventRSVPForm() {
let [name, setName] = useState("");
let [email, setEmail] = useState("");
let [attendees, setAttendees] = useState(1);
let [preferences, setPreferences] = useState("");
let [extras, setExtras] = useState(false);
let [responses, setResponses] = useState(null);
let [responded, setResponded] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
setResponses({name, email, attendees, preferences, extras, responses});
setResponded(true);
setName("");
setEmail("");
setAttendees(1);
setPreferences("");
setExtras(false);
setResponses(null);
const messageName = name;
const messageEmail = email;
const messageAttendees = attendees;
const messagePreferences = preferences;
const messageExtras = extras;
};
return <>
<form onSubmit={handleSubmit}>
<label>Name: <input type="text" required onChange={e => setName(e.target.value)}></input></label>
<label>Email address: <input type="email" required onChange={e => setEmail(e.target.value)}></input></label>
<label>Number of attendees: <input type="number" min="1" required onChange={e => setAttendees(e.target.value)}></input></label>
<label>Dietary preferences: <input type="text"onChange={e => setPreferences(e.target.value)}></input></label>
<label>Bringing additional guests: <input type="checkbox" value="yes" onChange={e => setExtras(e.target.value)}></input></label>
<button type="submit">RSVP</button>
</form>
{responded? <div id="message">
<p>RSVP Submitted!</p>
<p>Name: {messageName}</p>
<p>Email: {messageEmail}</p>
<p>Number of attendees: {messageAttendees}</p>
<p>Dietary preferences: {messagePreferences}</p>
<p>Bringing additional guests: {messageExtras}</p>
</div> : <div></div>}
</>;
}
const messageName = name;
const messageEmail = email;
const messageAttendees = attendees;
const messagePreferences = preferences;
const messageExtras = extras;
};
return <>
<form onSubmit={handleSubmit}>
<label>Name: <input type="text" required onChange={e => setName(e.target.value)}></input></label>
<label>Email address: <input type="email" required onChange={e => setEmail(e.target.value)}></input></label>
<label>Number of attendees: <input type="number" min="1" required onChange={e => setAttendees(e.target.value)}></input></label>
<label>Dietary preferences: <input type="text"onChange={e => setPreferences(e.target.value)}></input></label>
<label>Bringing additional guests: <input type="checkbox" value="yes" onChange={e => setExtras(e.target.value)}></input></label>
<button type="submit">RSVP</button>
</form>
{responded? <div id="message">
<p>RSVP Submitted!</p>
<p>Name: {name}</p>
<p>Email: {email}</p>
<p>Number of attendees: {attendees}</p>
<p>Dietary preferences: {preferences}</p>
<p>Bringing additional guests: {extras}</p>
</div> : <div></div>}
</>;
}
Can you tell me what the handleSubmit function does, in steps?
For example:
prevents default behaviour
What does it tell you that your const variable names are grey here?
If you focus on these two lines of code, what will the value of messageName be?
setName("");
const messageName = name;
I can’t explain why they’re grey, that’s the whole point. And it doesn’t appear to actually be preventing the default behaviour. As far as I can tell, the page still reloads
They’re grey because you never use them in your code.
It’s beside the point though, you already have a variable to store the name, why do you need to pass that to another variable?
You’ve edited this code and now I’m getting a syntax error.
Please don’t do that, post updated code in a new comment, or else our convo will make no sense going back.
It’s preventing default now and I’ve moved the constants.
const { useState } = React;
export function EventRSVPForm() {
let [name, setName] = useState("");
let [email, setEmail] = useState("");
let [attendees, setAttendees] = useState(1);
let [preferences, setPreferences] = useState("");
let [extras, setExtras] = useState(false);
let [responses, setResponses] = useState(null);
let [responded, setResponded] = useState(false);
let messageName = name;
let messageEmail = email;
let messageAttendees = attendees;
let messagePreferences = preferences;
let messageExtras = extras;
const handleSubmit = (e) => {
e.preventDefault();
setResponses({name, email, attendees, preferences, extras, responses});
messageName = name;
messageEmail = email;
messageAttendees = attendees;
messagePreferences = preferences;
messageExtras = extras;
setResponded(true);
setName("");
setEmail("");
setAttendees(1);
setPreferences("");
setExtras(false);
setResponses(null);
};
return <>
<form onSubmit={handleSubmit}>
<label>Name: <input type="text" required onChange={e => setName(e.target.value)}></input></label>
<label>Email address: <input type="email" required onChange={e => setEmail(e.target.value)}></input></label>
<label>Number of attendees: <input type="number" min="1" required onChange={e => setAttendees(e.target.value)}></input></label>
<label>Dietary preferences: <input type="text"onChange={e => setPreferences(e.target.value)}></input></label>
<label>Bringing additional guests: <input type="checkbox" value="yes" onChange={e => setExtras(e.target.value)}></input></label>
<button type="submit">RSVP</button>
</form>
{responded? <div id="message">
<p>RSVP Submitted!</p>
<p>Name: {messageName}</p>
<p>Email: {messageEmail}</p>
<p>Number of attendees: {messageAttendees}</p>
<p>Dietary preferences: {messagePreferences}</p>
<p>Bringing additional guests: {messageExtras}</p>
</div> : <div></div>}
</>;
}
I’m using another variable because using name, email etc wasn’t working
