complicated-state-form.jsx

// Overly complicated search form which uses custom state management 👎
function SearchBox() {
  const [queryParams, setQueryParams] = useState({ showAllResults: false });
  
  const handleSearchChange = (ev) => {
    const eventValue = ev.target.value;
    
    setQueryParams({ ...queryParams, q: eventValue });
  }
  
  const handleShowAllResultsToggle = (ev) => {
    setQueryParams({ ...queryParams, showAllResults: ev.target.checked });
  }
  
  const navigateToNewPage = (ev) => {
    history.push(`/search?q=${queryParams.q}&showAllResults=${queryParams.showAllResults}`)
  }
  
  return (
    <div className="search-box">
      <input type="search" placeholder="Search for blog posts" onChange={handleChange} />
      
      <label>
        Show all results?
        <input type="checkbox" onChange={handleShowAllResultsToggle} />
      </label>
      
      <button onClick={navigateToNewPage}>
        Search
      </button>
    </div>
  )
}

simple-form.jsx

// Simple search form which lets the browser do the heavy lifting 👍
function SearchBox() { 
  return (
    <form action="/search" method="GET">
      <input name="q" type="search" placeholder="Search for blog posts" />
      
      <label>
        Show all results?
        <input name="showAllResults" type="checkbox" defaultValue={false} />
      </label>
      
      <button type="submit">
        Search
      </button>
    </div>
  )
}

Hello there, a minor typo on simple-form.jsx, the closing tag must be </form> not </div>. Great article by the way...

Hello! Nice article, just to mention on line 21 the function should be handleSearchChange