Tell us what’s happening:
All my tests are passing except for -
- After submission, there should be an element on the page indicating the state of the additional guests input.
I am logging the submitted Data to console to confirm data is saving and it is always one submit behind ie, shows null on first submit, shows data from 1st submit on 2nd submit. I think it is due to how the page and states are rendering/refreshing but can’t get my head around why, a nudge in the right direction would be much appreicated
Your code so far
<!-- file: ind<!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>ex.html -->
/* file: styles.cssbody {
margin: 0;
padding: 0;
min-height: 100vh;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.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;
}
.column {
flex-direction: column;
}
.section {
display: flex;
margin-bottom: 30px;
}
.submit-wrap {
text-align: center;
}
.submit-btn {
display: block;
margin: 0 auto;
padding: 0.4rem 0.5rem;
border: 1px solid black
}
.submit-btn:disabled {
cursor: not-allowed;
}
.submit-btn:hover {
cursor: pointer;
background-color: #f3f3f3;
}
*/
/* file: index.jsx */
const { useState } = React;
export function EventRSVPForm() {
const [name, setName] = useState("");
const [email, setEmail ] = useState("");
const [attendees, setAttendees ] = useState(1);
const [dietaries, setDietaries ] = useState("");
const [additionalGuests, setAdditionalGuests ] = useState(false);
const [submittedData, setSubmittedData]= useState(null);
const handleSubmit = (e) => {
console.log(name,email,attendees,dietaries,additionalGuests)
e.preventDefault();
setSubmittedData({name,email,attendees,dietaries, additionalGuests});
console.log(submittedData)
setName('');
setEmail('');
setAttendees(1);
setDietaries('');
setAdditionalGuests(false);
};
return(
<div className='section'>
<form className="form-wrap" onSubmit={handleSubmit} >
<label className='section column'> Name
<input type="text" value={name} onChange={e => setName(e.target.value)} required />
</label>
<label className='section column'> Email Address
<input type="email" value={email} onChange={e => setEmail(e.target.value)}required />
</label>
<label className='section column'> Number of attendees
<input type="number" value={attendees} onChange={e => setAttendees(e.target.value)} min="1" required />
</label>
<label className='section column'> Dietary preferences
<input type="text" value={dietaries} onChange={e => setDietaries(e.target.value)}/>
</label>
<label className='section'> Additional guests?
<input type="checkbox" onChange={e => setAdditionalGuests(e.target.checked)}/>
</label>
<button className='submit-btn' type="submit">Submit</button>
{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.dietaries || 'None'}</p>
<p><strong>Bringing Additional Guests?:</strong> {submittedData.additionalGuests ? '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/139.0.0.0 Safari/537.36 Edg/139.0.0.0
Challenge Information:
Build an Event RSVP - Build an Event RSVP
https://www.freecodecamp.org/learn/full-stack-developer/lab-event-rsvp/build-an-event-rsvp