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 trial

JavaScript React by Example Building the Application Adding Guests to the List

Chris Grazioli
Chris Grazioli
31,225 Points
Posted by Chris Grazioli
Chris Grazioli
31,225 Points

Can'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
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Since 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
Chris Grazioli
31,225 Points
Chris Grazioli
Chris Grazioli
31,225 Points

Steven 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
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

I overlooked that this is handled as part of the call to "setState". But there is an issue with the binding of "value":

                value={this.pendingGuest}        <!-- code shown above -->
                value={this.state.pendingGuest}  <!-- video code -->
Chris Grazioli
Chris Grazioli
31,225 Points
Chris Grazioli
Chris Grazioli
31,225 Points

Eagle Eyes @Steven Parker !!! Nice catch... I knew it had to be something stupid I missed. Thanx

Sean Paulson
Sean Paulson
6,669 Points
Sean Paulson
Sean Paulson
6,669 Points

you 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.