How do I reset the values in a form in React JS onClick?

class AddFriendForm extends Component {
  constructor(props) {
   super(props)
   this.state = {
     firstname: '',
     lastname: '',
   }
 }

 render() {
    const { addFriend } = this.props

   const setFirstName = add => this.setState({ firstname: add.target.value })
   const setLastName = add => this.setState({ lastname: add.target.value })

return (
  <div>
    <div>
      <Label label="First Name" />
      <Field onChange={setFirstName} />

      <Label label="Last Name" />
      <Field onChange={setLastName} />

      <SecondaryButton
        name="Search"
        onClick={() => addFriend(this.state)}
      />

   <SecondaryButton
      name="Reset"
      onClick={() => ???}
      />
    </div>
  </div>
)
 }
}

When the user presses the Reset button, I want an onClick event that resets all the fields in the form to blank. Is there a single line of code to do this?

How do I reset the values in a form in React JS onClick?

class AddFriendForm extends Component {
  constructor(props) {
   super(props)
   this.state = {
     firstname: '',
     lastname: '',
   }
 }

 render() {
    const { addFriend } = this.props

   const setFirstName = add => this.setState({ firstname: add.target.value })
   const setLastName = add => this.setState({ lastname: add.target.value })

return (
  <div>
    <div>
      <Label label="First Name" />
      <Field onChange={setFirstName} />

      <Label label="Last Name" />
      <Field onChange={setLastName} />

      <SecondaryButton
        name="Search"
        onClick={() => addFriend(this.state)}
      />

   <SecondaryButton
      name="Reset"
      onClick={() => ???}
      />
    </div>
  </div>
)
 }
}

When the user presses the Reset button, I want an onClick event that resets all the fields in the form to blank. Is there a single line of code to do this?

• javascript
• reactjs
• redux

• 1 set the state of both values to an empty string, that will 'clear' it out – hjm Commented Dec 15, 2017 at 16:02
• follow the pattern already there. (for example setLastName ) and instead of setting the state to add.target.value set it to "" as hjm said. – Andrew L Commented Dec 15, 2017 at 16:04
• Don't call setState in render method ! – user5738822 Commented Dec 16, 2017 at 8:21
• where should it be called? – Shh Commented Dec 18, 2017 at 9:11

4 Answers 4

First, create a function called resetForm

resetForm = () => {
   this.setState({
       ...this.state,
       firstname: '',
       lastname: ''
   })
}

Then trigger the function when reset button is clicked

onClick={this.resetForm}

Cheers mate

EDIT:

You have to assign the values to "Field" using value={this.state.firstname}

<Field value={this.state.firstname} onChange={...

Small tip: dont define your functions in your jsx code.

You can do this simply like this.

Before the render() add below part. This is a function to reset the fields.

      reset = () => {
      this.setState({ firstname: ''})
      this.setState({ lastname: ''})
  }

And this where the function is called. (In Button onPress.)

<Button 
    title='reset'
    style={styles.button}
    onPress={this.reset}
    >
</Button>

Note:- use this one in functional ponent.

const handleReset = (e) => {
    e.preventDefault();
    setState(prevState => ({
        ...prevState,
        name: '',
        email: '',
        password: ''
    }))
}

handleReset = () => { setState(({ name: '', email: '', })) }