title: React JS How to reset a form
body: <p>How do I reset the values in a form in React JS onClick?</p>
  
  <pre><code>class AddFriendForm extends Component {
    constructor(props) {
     super(props)
     this.state = {
       firstname: '',
       lastname: '',
     }
   }
  
   render() {
      const { addFriend } = this.props
  
     const setFirstName = add =&gt; this.setState({ firstname: add.target.value })
     const setLastName = add =&gt; this.setState({ lastname: add.target.value })
  
  return (
    &lt;div&gt;
      &lt;div&gt;
        &lt;Label label="First Name" /&gt;
        &lt;Field onChange={setFirstName} /&gt;
  
        &lt;Label label="Last Name" /&gt;
        &lt;Field onChange={setLastName} /&gt;
  
        &lt;SecondaryButton
          name="Search"
          onClick={() =&gt; addFriend(this.state)}
        /&gt;
  
     &lt;SecondaryButton
        name="Reset"
        onClick={() =&gt; ???}
        /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
   }
  }
  </code></pre>
  
  <p>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?</p>