Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialChris Grazioli
31,225 PointsCan't get form input to reset on submit?
Upon submit the state changes (I can watch it in chrome/dev/react tools) pendingGuest goes from whatever I was typing and creates a new Guest element. It also sets the state of pendingGuest:'' to an empty string and I can see this, BUT the form input element on the screen never clears/updates
newGuestSubmitHandler = (e)=>{
e.preventDefault();
const newPerson={
name: this.state.pendingGuest,
isConfirmed: false,
isEditing: false
};
this.setState( prevState => ({
guests: [newPerson, ...prevState.guests],
pendingGuest:''
}));
}
handleNameInput = (e) =>
this.setState({ pendingGuest: e.target.value });
render(){
return(
<div className="App">
<header>
<h1>RSVP</h1>
<p>A Treehouse App</p>
<form onSubmit={this.newGuestSubmitHandler}>
<input
type="text"
value={this.pendingGuest}
placeholder="Invite Someone"
onChange={this.handleNameInput}
/>
<button type="submit" name="submit" value="submit"> Submit
</button>
</form>
What am I missing???
3 Answers
Steven Parker
231,275 PointsSince you have taken over the normal operation of the submit (with "preventDefault"), you'll need to make any changes to the DOM yourself in your code.
document.querySelector("input").value = "";
Chris Grazioli
31,225 PointsEagle Eyes @Steven Parker !!! Nice catch... I knew it had to be something stupid I missed. Thanx
Sean Paulson
6,669 Pointsyou should not directly manipulate the DOM with the document object. Use the Refs API documented here https://reactjs.org/docs/refs-and-the-dom.html on the react website.
Also one trick I learned to reset the form is in your input element set value to value={ this.props.newPerson.name || '' } Make sure to set newPerson.name to '' a blank text after you submit the newPerson.
Chris Grazioli
31,225 PointsChris Grazioli
31,225 PointsSteven Parker Thanx for responding! What your saying makes complete sense and I'll try it. But Guil Hernandez shows this code as working in the Treehouse video, so I'm assuming if it went through production, I must be missing something else. Has anyone else had this issue??? Or any other Suggestions. I'm using chrome and @Guil Hernandez uses OS. Is it a user-agent thing?
Steven Parker
231,275 PointsSteven Parker
231,275 PointsI overlooked that this is handled as part of the call to "setState". But there is an issue with the binding of "value":