React - clearing an input value after form submit

Question

I m presented with a rather silly problem  I am in the process of creating my first React application and I have encountered a little issue  where I am not able to clear my input value  after I submit a form  A tried googling this problem  found some similar threads here  but I was not able to resolve this  I do NOT want to change the state of my component application  just to change the value of the input to an empty string  I tried clearing the value of the input in my onHandleSubmit   function  but I got an error       Cannot set property  value  of undefined     My SearchBar Component   import React    Component   from  react    class SearchBar extends Component     constructor props        super props        this state           city                 this onHandleChange   this onHandleChange bind this       this onHandleSubmit   this onHandleSubmit bind this          render         return          lt form gt           lt input           id  mainInput            onChange  this onHandleChange            placeholder  Get current weather               value  this state city            type  text            gt           lt button onClick  this onHandleSubmit  type  submit  gt            Search           lt  button gt         lt  form gt                onHandleChange e        this setState         city  e target value                onHandleSubmit e        e preventDefault        const city   this state city      this props onSearchTermChange city       this mainInput value              export default SearchBar

User · Accepted Answer

You are having a controlled component where input value is determined by this state city  So once you submit you have to clear your state which will clear your input automatically   onHandleSubmit e        e preventDefault        const city   this state city      this props onSearchTermChange city       this setState         city

User · Answer

The answers above are incorrect  they will all run weather or not the submission is successful    You need to write an error component that will receive any errors then check if there are errors in state  if there are not then clear the form      use  then    example    const onSubmit    e   gt    e preventDefault    const fd   new FormData    fd append  ticketType   ticketType   fd append  ticketSubject   ticketSubject   fd append  ticketDescription   ticketDescription   fd append  itHelpType   itHelpType   fd append  ticketPriority   ticketPriority   fd append  ticketAttachments   ticketAttachments   newTicketITTicket fd  then     gt     setTicketData       ticketType   IT       ticketSubject          ticketDescription          itHelpType          ticketPriority

User · Answer

This is the value that i want to clear and create it in state 1st STEP  state   TemplateCode         craete submitHandler function for Button or what you want 3rd STEP   submitHandler     gt   this clear     this is function i made     This is clear function Final STEP  clear        gt     this setState       TemplateCode      simply you can clear Templatecode           when click button Templatecode is clear 2nd STEP   lt div class  col-md-12  align  right  gt     lt button id    type  submit  class  btn btnprimary  onClick this submitHandler  gt  Save     lt  button gt   lt  div gt

User · Answer

In your onHandleSubmit function  set your state to  city      again like this    this setState   city

User · Answer

Since you input field is a controlled element  you cannot directly change the input field value without modifying the state   Also in   onHandleSubmit e        e preventDefault        const city   this state city      this props onSearchTermChange city       this mainInput value             this mainInput doesn t refer the input since mainInput is an id  you need to specify a ref to the input   lt input       ref   ref    gt  this mainInput  ref        onChange  this onHandleChange        placeholder  Get current weather           value  this state city        type  text        gt    In you current state the best way is to clear the state to clear the input value  onHandleSubmit e        e preventDefault        const city   this state city      this props onSearchTermChange city       this setState  city              However if you still for some reason want to keep the value in state even if the form is submitted  you would rather make the input uncontrolled   lt input       id  mainInput        onChange  this onHandleChange        placeholder  Get current weather           type  text        gt    and update the value in state onChange and onSubmit clear the input using ref   onHandleChange e        this setState         city  e target value                onHandleSubmit e        e preventDefault        const city   this state city      this props onSearchTermChange city       this mainInput value             Having Said that  I don t see any point in keeping the state unchanged  so the first option should be the way to go

User · Answer

this mainInput doesn t actually point to anything  Since you are using a controlled component  i e  the value of the input is obtained from state  you can set this state city to null   onHandleSubmit e      e preventDefault      const city   this state city    this props onSearchTermChange city     this setState   city

[javascript] React - clearing an input value after form submit

Examples related to javascript

Examples related to forms

Examples related to reactjs

Examples related to input

Examples related to submit