Hi there!
This has happened before but now I know how to report bugs and would like to contribute in any way I can. From time to time the internal previewer is not rendering anything, but if you open it in another window: no problem!
Build an Event RSVP: Build an Event RSVP | freeCodeCamp.org
Now it´s happening here, but like I wrote before I have seen this issue a few times previously.
can you share the code you have written? we can investigate to see if we can reproduce with that
Another thing I noted is in the solution. I’m filling dynamically as I type and have not programmed the button to to anything else than preventDefault. It should not be an accepted solution as it should be shown after submission.
const { useState } = React;
export function EventRSVPForm() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [attendees, setAttendees] = useState(0);
const [dietaryPrefs, setDietaryPrefs] = useState("None");
const [additionalGuests, setAdditionalGuests] = useState(false);
function handleSubmit(e) {
e.preventDefault();
}
return (
<>
<form onSubmit={handleSubmit}>
<label>Name: <input type="text" required value={name} onChange={(e) => { setName(e.target.value) }}></input></label>
<label>Email: <input required type="email" value={email} onChange={(e) => { setEmail(e.target.value) }} /></label>
<label>Number of attendees: <input required type="number" min="1" value={attendees} onChange={(e) => { setAttendees(e.target.value) }} /></label>
<label>Dietary preferences: <input type="text" value={dietaryPrefs} onChange={(e) => { setDietaryPrefs(e.target.value) }} /></label>
<label>Bringing guests: <input type="checkbox" value={additionalGuests} onChange={(e) => { setAdditionalGuests(e.target.value) }} /></label>
<button>Submit</button>
</form>
<div>
<p>RSVP Submitted!</p>
<p>Name:{name}</p>
<p>Email:{email} </p>
<p>Number of attendees:{attendees} </p>
<p>Dietary preferences:{dietaryPrefs} </p>
<p>Bringing additional guests:{additionalGuests} </p>
</div>
</>
)
}
It should be something like this (Of course, declaring the submitted variable before):
{submitted && (
<div>
<p>RSVP Submitted!</p>
<p>Name: {name}</p>
<p>Email: {email}</p>
<p>Number of attendees: {attendees}</p>
<p>Dietary preferences: {dietaryPrefs}</p>
<p>Bringing additional guests: {bringingGuests ? "Yes" : "No"}</p>
</div>
)}
let’s investigate the issue with the preview here, if you want to discuss the issues with your code not passing please create a topic about that
Oh, no, the code is passing! That’s the problem.
the preview appear properly for me, did you make changes to the other files maybe?
No. Only in the .jsx
if you go back to the page, does it keep happening?
Yes. It happens even if I return.
would you mind trying clearing the cache?
I tried Ctrl. + F5 and nothing.
did you try clearing the cache of your browser?
No. I did not. Maybe that was the problem. I just moved on.
can you please try to see if after clearing cache you still see that preview blank?
After doing that it renders properly.