title: How to clear input after form submit (React)
body: <p>I have a search input I'd like to clear after the value is submitted and the search is performed with the value. In similar questions, it was suggested to set the state of the input value to <code>''</code>, but I think that's what I tried and it didn't do anything. </p>
  
  <p>I only have a parent and child component in my app. The parent component has a method for searching jokes (<code>searchJokes</code>), and it is passed down as a prop with a different name to the child component in the component instance with <code>onFormSubmit={this.searchJokes}</code>. In the child component, when the user enters something into the search input, its <code>event.target.value</code> is passed with <code>onChange={e =&gt; props.onInputChange(e.target.value)}</code> corresponding to the onSearchChange method in the parent prop, and the value is used to update the state of <code>searchTerm</code>. </p>
  
  <p>I added <code>searchTerm: ''</code> to the end of the searchJokes method, which fetches a search according to the search term, as you can see in the parent component code below.</p>
  
  <p>Parent component:</p>
  
  <pre><code>class App extends Component {
    constructor() {
      super();
  
      this.state = {
        searchTerm: '',
        jokes: [],
        isFetchingJokes: false,
        isSearch: false
      };
  
      this.onSearchChange = this.onSearchChange.bind(this);
      this.randomizeJokes = this.randomizeJokes.bind(this);
      this.searchJokes = this.searchJokes.bind(this);
    }
  
    randomizeJokes() {
      this.setState({
        isFetchingJokes: true,
        isSearch: false
      });
  
      fetch(
        'https://icanhazdadjoke.com/',
        {
          method: 'GET',
          headers: {
            Accept: 'application/json'
          }
      })
        .then(response =&gt; response.json())
        .then(json =&gt; {
          let joke = json.joke;
          this.setState({
            joke,
            isFetchingJokes: false
          });
        });
    }
  
    searchJokes(limit = 15) {
      // If nothing entered, user gets "Please fill out this field" message due to "required" attribute on input element
      if (this.state.searchTerm !== '') {
        this.setState({
          isFetchingJokes: true,
          isSearch: true
        });
  
        fetch(
          `https://icanhazdadjoke.com/search?term=${
            this.state.searchTerm
          }&amp;limit=${limit}`,
          {
            method: 'GET',
            headers: {
              Accept: 'application/json'
            }
        })
          .then(response =&gt; response.json())
          .then(json =&gt; {
            let jokes = json.results;
            this.setState({
              jokes,
              isFetchingJokes: false,
              searchTerm: '' // &lt;-- DOESN'T CLEAR INPUT
            });
          });
      }
    }
  
    onSearchChange(value) {
      this.setState({ searchTerm: value });
    }
  
    jokeRender() {
      return (
        &lt;div&gt;
          {this.state.isSearch ?
            &lt;ul&gt;{this.state.jokes.map(item =&gt; &lt;li key={item.id}&gt;{item.joke}&lt;/li&gt;)}
            &lt;/ul&gt; : &lt;p className="random-joke"&gt;{this.state.joke}&lt;/p&gt;}
        &lt;/div&gt;
      );
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Dad Jokes&lt;/h1&gt;
          &lt;RetrievalForm
            onFormSubmit={this.searchJokes}
            onInputChange={this.onSearchChange}
            isSearching={this.state.isFetchingJokes}
            onRandomize={this.randomizeJokes}
          /&gt;
  
          {this.state.isFetchingJokes ? &lt;p className="searching-message"&gt;Searching for jokes...&lt;/p&gt; : this.jokeRender()}
        &lt;/div&gt;
      );
    };
  }
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>const RetrievalForm = props =&gt; {
    const onSubmit = e =&gt; {
      // Prevents GET request/page refresh on submit
      e.preventDefault();
      props.onFormSubmit();
    };
  
    return (
      &lt;&gt;
        &lt;form onSubmit={onSubmit}&gt;
          &lt;input
            type="text"
            placeholder="Enter search term..."
            onChange={e =&gt; props.onInputChange(e.target.value)}
            required
          /&gt;
          &lt;div&gt;
            {/* Specifying type here since it's good practice; different browsers may use default types for buttons */}
            &lt;button type="submit" disabled={props.isSearching}&gt;Search&lt;/button&gt;
            {/* type="button" stops input validation message from being displayed (on Firefox) when randomize button is clicked without anything entered */}
            &lt;button type="button" onClick={props.onRandomize} disabled={props.isSearching} className="randomize-button"&gt;
              Randomize
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>