Tell us what’s happening:
Hello, the code works as intended but it doesn’t passes, I’ve tried checking the logs and even tried my peers’ code which supposedly should worke and it returns me the same errors… The states get updated correctly and the information too so I’m kinda lost. Can anybody shed a light on this?
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 */
label{
display:block;
margin-bottom:8px
}
input{
display:block
}
.hidden{
display:none;
}
/* file: index.jsx */
const { useState } = React;
export function EventRSVPForm() {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [attendees, setAttendees] = useState('')
const [diet, setDiet] = useState('')
const [addGuests, setAddGuests] = useState(false)
const [submittedData, setSubmittedData] = useState(null)
const handleSubmit = (e) => {
e.preventDefault()
setSubmittedData({name, email, attendees, diet, addGuests})
setName('')
setEmail('')
setAttendees('')
setDiet('')
setAddGuests(false)
}
return (
<div>
<form onSubmit={handleSubmit}>
<label>
Name
<input
required
type="text"
placeholder="Your name"
value={name}
onChange={e => setName(e.target.value)}/>
</label>
<label>
Email
<input
required
type="email"
placeholder="Your email"
value={email}
onChange={e => setEmail(e.target.value)}/>
</label>
<label>
Number of attendees
<input
required
type="number"
placeholder="Number of atendees"
value={attendees}
onChange={e => setAttendees(e.target.value)}/>
</label>
<label>
Dietary preferences
<input
type="text"
placeholder="Dietary preferences (Optional)"
value={diet}
onChange={(e) => setDiet(e.target.value)}/>
</label>
<label>
Bringing additional guests?
<input
type="checkbox"
value={addGuests}onClick={() => {setAddGuests(n => !n)}}/>
</label>
<button
type="submit"
disabled={!name || !email || !attendees}>Submit RSVP</button>
</form>
{submittedData && <div>
<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.diet === '' ? 'None' : submittedData.diet}</p>
<p>Bringing additional guests: {submittedData.addGuests ? 'Yes' : 'No'}</p>
</div>}
</div>
)
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.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
