this is for the v5 with hooks, new pet api

SearchParams.js

import React, { useState } from "react";
import { ANIMALS } from "@frontendmasters/pet";

const SearchParams = () => {
  // api limited to seattle and sf
  const [location, setLocation] = useState("Seattle, WA");
  const [animal, setAnimal] = useState("dog");
  const [breed, setBreed] = useState("");

  return (
    <div className="search-params">
      <p>{location}</p>
      <form>
        <label htmlFor="location">
          location
          <input
            onChange={e => setLocation(e.target.value)}
            id="location"
            value={location}
            placeholder={"Location"}
          />
        </label>
        <label htmlFor="animal">
          animal
          <select
            id="animal"
            value={animal}
            onChange={e => setAnimal(e.target.value)}
            onBlur={e => setAnimal(e.target.value)}
          >
            <option>All</option>
            {ANIMALS.map(animal => (
              <option key={animal} value={animal}>
                {animal}
              </option>
            ))}
          </select>
        </label>
        <label htmlFor="breed">
          breed
          <select
            id="breed"
            value={breed}
            onChange={e => setBreed(e.target.value)}
            onBlur={e => setBreed(e.target.value)}
            disabled={false}
          >
            {breed}
          </select>
        </label>
      </form>
    </div>
  );
};

export default SearchParams;