import React from "react";
import useTurkeyCities from "use-turkey-cities";
 
const App: React.FC = () => {
  const { cities, city, setCity, districts, district, setDistrict } = useTurkeyCities();
 
  return (
    <div className="App">
      <form
        onSubmit={e => {
          e.preventDefault();
          console.log(city, districts);
        }}
      >
        <select
          onChange={e => {
            setCity(e.target.value);
          }}
          value={city}
        >
          {cities.map(city => (
            <option key={`city-${city}`} value={city}>
              {city}
            </option>
          ))}
        </select>
        <br />
        <select
          onChange={e => {
            setDistrict(e.target.value);
          }}
          value={district}
        >
          {districts.map(district => (
            <option key={district} value={district}>
              {district}
            </option>
          ))}
        </select>
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};
 
export default App;