title: React - clearing an input value after form submit
body: <p>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 <code>onHandleSubmit()</code> function, but I got an error:</p>
  
  <blockquote>
    <p>"Cannot set property 'value' of undefined".</p>
  </blockquote>
  
  <p>My SearchBar Component:</p>
  
  <pre><code>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;
  </code></pre>