Tell us what’s happening:
My problem is with step 16 “After submission, there should be an element on the page indicating the state of the email input.” and 18 “After submission, there should be an element on the page indicating the state of the dietary preferences input”.
My code has no apparent problems and it shows the values of the inputs correctly.
Is it something I missed or is it something else?
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: index.jsx */
const { useState } = React;
export function EventRSVPForm() {
const [nameInput, setNameInput] = useState("");
const [emailInput, setEmailInput] = useState("");
const [numberInput, setNumberInput] = useState("");
const [dietaryInput, setDietaryInput] = useState("");
const [additionalInput, setAdditionalInput] = useState(false);
const [result, setResult] = useState(false);
return (
<div className="rsvp-form">
<h1>Event RSVP</h1>
<form onSubmit={(e) => e.preventDefault()}>
<label htmlFor="nameInput" >Name
<input type="text" value={nameInput} id="nameInput" name="nameInput" onChange={e => setNameInput(e.target.value)} required/>
</label>
<label htmlFor="emailInput" >Email
<input type="email" id="emailInput" name="emailInput" value={emailInput} onChange={e => setEmailInput(e.target.value)} required/>
</label>
<label htmlFor="numberInput" >Number of attendees
<input type="number" min="1" id="numberInput" name="numberInput" value={numberInput} onChange={e => setNumberInput(e.target.value)} required/>
</label>
<label htmlFor="dietaryInput" >Dietary Preferences
<input type="text" id="dietaryInput" name="dietaryInput" value={dietaryInput} onChange={e => setDietaryInput(e.target.value)} />
</label>
<label htmlFor="additionalInput" >Additional guests?
<input type="checkbox" id="additionalInput" name="additionalInput" value={additionalInput} onChange={e => setAdditionalInput(e.target.value)} />
</label>
<button type="submit" onClick={() => setResult(!result)}>Submit</button>
</form>
{result && <div className="rsvp-form result">
<p>RSVP Sent!</p>
<p>Name: {nameInput}</p>
<p>Email: {emailInput}</p>
<p>Number of attendees: {numberInput}</p>
<p>Dietary Preferences: {dietaryInput}</p>
<p>Additional guests?: {additionalInput ? "Yes" : "No"}</p>
</div>}
</div>
)
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36
Challenge Information:
Build an Event RSVP - Build an Event RSVP