How to clear input after onClick with ReactJS

Question

I need to implement a clear/reset for the inputs after onClick occurs, and also after it is stored in localStorage. I can't seem to figure out how to code this and where. Here is my add function and render function.

addExpense(e) {
e.preventDefault()
let exList = this.state.exList
if (this.state.expense === null) {
  alert('Please enter a name.')
  return false
}
if (this.state.amount === 0) {
  alert('Please enter a valid amount.')
  return false
}
if(isNaN(this.state.amount)) {
  alert('The amount must be a number.')
  return false
}
this.state.exList.push({ 'title':this.state.title, 'amount':this.state.amount })
this.setState({ exList: this.state.exList })
localStorage.setItem('exList', JSON.stringify(exList))
}

render() {
let myExpenses = this.state.exList.map((val, key) => { return <ExpenseList val={val} key={key} id={key} delMe={() =>this.removeExpense(key) } />
})
return (
  <main className="ContactList">
    <section className="add container">
      <h2 className="newExpense">Add Expense</h2>
      <form name="myForm">
        <p>
          <label>Title </label>
          <input type="text" name="title" onChange= . 
   {this.changeExpense} />
          <label>Amount </label>
          <input type="text" name="amount" onChange= . 
   {this.changeAmount} />
          <button type="submit" className="btn" onClick= . 
   {this.addExpense}>Add</button>
        </p>
      </form>
    </section>

    <section className="container">
      <h3 className="currentExpense">Current Expenses</h3>
      <article className="contentScroll">
        <ul className="expenseCont">{myExpenses}</ul>
      </article>
    </section>
  </main>
)
}

Possible duplicate of [Clear and reset form input fields](https://stackoverflow.com/questions/43922508/clear-and-reset-form-input-fields) — Jake Stewart, Nov 05 '18 at 14:20

Jake Stewart · Answer 1 · 2018-11-03T04:02:39.423

0

If you're just trying to clear some form fields, you could set the state for each field after submission to ''.

For example:

this.setState({
  amount: '', 
  exList: ''
});

You would add this after all of your data has been saved and processed, so at the end of your function would be ok. Or, you could create another function to handle clearing each form field.

edited Nov 03 '18 at 04:02

answered Nov 03 '18 at 03:12

Jake Stewart

143
2
12

Yes I just need to clear the form fields after submission. Where exactly would I place this in my code? – Eileen Palabasan Garingo Nov 03 '18 at 03:26
Under this line `localStorage.setItem('exList', JSON.stringify(exList))` should work. – Jake Stewart Nov 03 '18 at 03:27
I tried it and it didn't work. Please advise. Thanks so much! – Eileen Palabasan Garingo Nov 03 '18 at 03:59
I updated my answer with correct state attribute names. – Jake Stewart Nov 03 '18 at 04:07
1

Take a look at this https://reactjs.org/docs/forms.html and also this https://stackoverflow.com/questions/43922508/clear-and-reset-form-input-fields/43922523. – Jake Stewart Nov 03 '18 at 17:42

score 0 · Answer 2 · answered Nov 03 '18 at 03:22

In react everything depends on your state, If the value of a state field changed then your page again render by react

So if you want to clear all the fields of your form then you have to clear the object associated with your text.

Like I set an object in the state within the construction of a component like

this.setState({name: '', email: '', phone_number: ''});

Now after some operation, all the field in my state has values. Now I want clear all the fields after click a button clear, then I will make a function for the clear button and I will write following code inside the clear function

const clear_obj = Object.assign({},this.state);
for(let key in clear_obj){
  clear_obj[key] = '';
}
this.setState(clear_obj);

I can also set the default values so that It will look fresh form.

score 0 · Answer 3 · answered Nov 03 '18 at 03:34

You need to have the value attribute for inputs

value={this.state.expense}

and

value={this.state.amount}

in changeExpense and changeAmount you need to set the state with new value.

to clear inputs, in addExpense below localStorage call you need to setState again

this.setState({ expense: '', amount: '' })

Your code would look like this.

addExpense(e) {
e.preventDefault()
let exList = this.state.exList
if (this.state.expense === null) {
  alert('Please enter a name.')
  return false
}
if (this.state.amount === 0) {
  alert('Please enter a valid amount.')
  return false
}
if(isNaN(this.state.amount)) {
  alert('The amount must be a number.')
  return false
}
this.state.exList.push({ 'title':this.state.title, 'amount':this.state.amount })

localStorage.setItem('exList', JSON.stringify(exList))
this.setState({ expense: '', amount: '', exList: this.state.exList });
}

render() {
let myExpenses = this.state.exList.map((val, key) => { return <ExpenseList val={val} key={key} id={key} delMe={() =>this.removeExpense(key) } />
})
return (
  <main className="ContactList">
    <section className="add container">
      <h2 className="newExpense">Add Expense</h2>
      <form name="myForm">
        <p>
          <label>Title </label>
          <input type="text" name="title" value={this.state.expense} onChange= . 
   {this.changeExpense} />
          <label>Amount </label>
          <input type="text" name="amount" value={this.state.amount} onChange= . 
   {this.changeAmount} />
          <button type="submit" className="btn" onClick= . 
   {this.addExpense}>Add</button>
        </p>
      </form>
    </section>

    <section className="container">
      <h3 className="currentExpense">Current Expenses</h3>
      <article className="contentScroll">
        <ul className="expenseCont">{myExpenses}</ul>
      </article>
    </section>
  </main>
)
}

So sorry but this is still not working for me. Not sure what I'm doing wrong. — Eileen Palabasan Garingo, Nov 03 '18 at 04:33
changeExpense(e) { e.preventDefault() this.setState({ title: e.target.value }) } changeAmount(e) { e.preventDefault() let mamount = e.target.value mamount = parseFloat(mamount).toFixed(2) this.setState({ amount: mamount }) } — Eileen Palabasan Garingo, Nov 03 '18 at 04:33

How to clear input after onClick with ReactJS

3 Answers3