Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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
210,487 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

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
210,487 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

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

Sean Paulson
Sean Paulson
5,410 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.