Bug in select element in combination with state handling

[TobiasSteinhagen]

Hello there,

We are working in our EditForm component so that the user can change his trip details, in this case the country and the city. After switching the country he needs to receive the cities that belong to the country.

Unfortunately, after switching the country, for example, from Germany to France and then back to Germany, we receive no cities at all, although when we first switch to a different country, everything works fine.

We handle the defaultCity over a state in the handleIsoCode function at the moment and we know, if this state handling will be in this function, we have to rename it.

Here is the code and the PR

import EditForm from "@/components/EditForm";
import { useRouter } from "next/router";
import useSWR from "swr";
import { useState } from "react";

const fetcher = (...args) => fetch(...args).then((res) => res.json());

export default function EditFormPage() {
  const { mutate } = useSWR("/api/trips");
  const router = useRouter();

  const [endDateDisabled, setEndDateDisabled] = useState(false);

  const { id } = router.query;
  const { data: trip, isLoading } = useSWR(
    id ? `/api/trips/${id}` : null,
    fetcher
  );

  if (!trip || isLoading) {
    return <h2>is Loading...</h2>;
  }

  const { title, location, timePeriod } = trip;
  const { country, city } = location[0];
  const { startDate, endDate } = timePeriod[0];

  function toggleDisabled(event) {
    setEndDateDisabled(!event.target.value);
  }

  async function handleEditTrip(event) {
    event.preventDefault();

    const formData = new FormData(event.target);
    const tripData = Object.fromEntries(formData);

    const repTripDataCountry = tripData.country.replace(" ", "");
    const repTripDataCity = tripData.city.replace(" ", "-");

    const editedTrip = {
      title: tripData.title,
      location: [{ country: tripData.country, city: tripData.city }],
      timePeriod: [
        { startDate: tripData.startDate, endDate: tripData.endDate },
      ],
      img: `${repTripDataCity}`
        ? `https://source.unsplash.com/random/?${repTripDataCountry}-${repTripDataCity}`
        : `https://source.unsplash.com/random/?${repTripDataCountry}`,
    };
    if (tripData.endDate < tripData.startDate) {
      alert("The end date needs to be bigger than the start date!");
    } else {
      try {
        const response = await fetch(`/api/trips/${id}`, {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(editedTrip),
        });

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        router.push(`/trip/${id}`);
      } catch (error) {
        console.error("Error updating trip:", error);
      }
    }
  }
  return (
    <EditForm
      country={country}
      city={city}
      title={title}
      startDate={startDate}
      endDate={endDate}
      handleEditTrip={handleEditTrip}
      toggleDisabled={toggleDisabled}
      endDateDisabled={endDateDisabled}
    />
  );
}

Thanks in advance, looking forward to your feedback ✌️

[ahohnsen]

Hi there,

As we already discussed, you are missing the value attribute on your country select in your EditForm:

<option selected value={defaultIsoCode}>
              {country} {defaultFlag}
            </option>
            {countries.map(({ isoCode, flag, name }) => (
              <option key={isoCode} value={isoCode}>
                {name} {flag}
              </option>
            ))}

You need the countries iso code to determine the cities of the respective country. 🙂