title: NEXTJS: Best way to populate and erase input field with params from useRouter and preserve "back button" history
body: <p>I am learning NextJS by creating a simple 2 page search engine.  The index page is just an input field and submit button that passes the params like "/search?q=nissan maxima" and I access the params on the search page using "router.query.q".  </p>
  
  <p>Like any search engine, the current query should show in the input field on the search results page and pressing the "back button" should populate the input field with the previous queries params. I am able to achieve exaclty what i want except I can't delete the existing input value because of this line of code:</p>
  
  <pre><code> &lt;input type="text" id="search " name="q" value={query || props.query} onChange={handleChange}/&gt;
  </code></pre>
  
  <p>I need an alternative way to handle <code>value={query || props.query}</code></p>
  
  <p>Here is the code for my search.js</p>
  
  <pre><code>import {useRouter} from 'next/router';
  import React, {useState} from 'react';
  
  const SearchForm = props =&gt; {
      const [query, setQuery] = useState(props.query);
      const handleChange = event =&gt; setQuery(event.target.value);
      return (
          &lt;div&gt;
  
              &lt;form action={`/search?${props.query}`}&gt;
                  &lt;input type="text" id="search " name="q" value={query || props.query}
                         onChange={handleChange}/&gt;
                  &lt;input type="submit" value="Submit"/&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
      );
  };
  const Search = () =&gt; {
      const router = useRouter();
  
      return (
          &lt;SearchForm query={router.query.q}/&gt;
  
      );
  };
  
  
  export default Search;
  </code></pre>
  
  <p>Thanks in advance for any help and it is greatly appreciated.</p>