Set the endDate to an empty string, after it was changed to an endDate that is smaller than the startDate doesn't work, because it renders two times

[TobiasSteinhagen]

Hello there,

we added a handler function to our code (handleEndDateValue), that should do the following:

• inform the user, when he changes the endDate to a date, smaller than the startDate, that he needs to choose another endDate (works)
• change the value of the endDate to an empty string (doesn't work)

We observed, that (after changing the endDate to a smaller date than the startDate), the render process runs twice, therefore the alert runs twice as well and then the endDate will be set to an empty string.

We don't know how to bypass this behavior, we tried to build in an useEffect, didn't work (deleted the useEffect form the code already), maybe you have an idea and can help us?

This is the PR

Here is the code, you will find it in pages/forms/TripForm/[id].js.

import CancelButton from "@/components/CancelButton";
import CreateButton from "@/components/CreateButton";
import { useRouter } from "next/router";
import useSWR from "swr";
import { useState, useEffect } from "react";

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

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

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

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

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

  const { title, location, timePeriod, img } = trips;
  const country = location.map((location) => `${location.country}`);
  const city = location.map((location) => `${location.city}`);
  const startDate = timePeriod.map((timePeriod) => `${timePeriod.startDate}`);
  const endDate = timePeriod.map((timePeriod) => `${timePeriod.endDate}`);

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

  function handleEndDateValue(event) {
    const endDate = event.target.value;
    const startDate = document.getElementsByName("startDate")[0].value;
    if (endDate < startDate) {
      alert("The end date needs to be bigger than the start date!");
      event.target.value = new Date("");
    }
    return;
  }

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

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

    const editedTrip = {
      title: tripData.title,
      location: [{ country: tripData.country, city: tripData.city }],
      timePeriod: [
        { startDate: tripData.startDate, endDate: tripData.endDate },
      ],
    };

    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}`);
      }

      mutate();
      router.push(`/trip/${id}`);
    } catch (error) {
      console.error("Error updating trip:", error);
    }
  }

  return (
    <>
      <form onSubmit={handleEditTrip}>
        <label>
          Country
          <input name="country" defaultValue={country} minLength={3} required />
        </label>
        <label>
          City
          <input name="city" defaultValue={city} />
        </label>
        <label>
          Title
          <input name="title" defaultValue={title} minLength={3} required />
        </label>
        <label>
          Start date
          <input
            name="startDate"
            type="date"
            defaultValue={startDate}
            required
            onChange={handleDisabled}
          />
        </label>
        <label>
          End date
          <input
            name="endDate"
            type="date"
            defaultValue={endDate}
            required
            disabled={endDateDisabled}
            onChange={handleEndDateValue}
          />
        </label>
        <CreateButton>Save</CreateButton>
      </form>
      <CancelButton />
    </>
  );
}

Looking forward to your feedback! Thanks in advance ✌️ 🐸

[TobiasSteinhagen]

Hi @ahohnsen & @JessicaLoers, first of all, thank you for your input and the feedback! 🐸

We added the handler function + the state for the end date value to the onSubmit function, set the value of the End Date to endDateValue from the state and now everything works ✌️

Here is the code:

import CancelButton from "@/components/CancelButton";
import CreateButton from "@/components/CreateButton";
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 TripDetailsForm() {
  const { mutate } = useSWR("/api/trips");
  const router = useRouter();

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

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

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

  const { title, location, timePeriod, img } = trips;
  const country = location.map((location) => `${location.country}`);
  const city = location.map((location) => `${location.city}`);
  const startDate = timePeriod.map((timePeriod) => `${timePeriod.startDate}`);
  const endDate = timePeriod.map((timePeriod) => `${timePeriod.endDate}`);

  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 editedTrip = {
      title: tripData.title,
      location: [{ country: tripData.country, city: tripData.city }],
      timePeriod: [
        { startDate: tripData.startDate, endDate: tripData.endDate },
      ],
    };

    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}`);
      }

      if (tripData.endDate < tripData.startDate) {
        alert("The end date needs to be bigger than the start date!");
      } else {
        router.push(`/trip/${id}`);
      }
    } catch (error) {
      console.error("Error updating trip:", error);
    }
  }

  return (
    <>
      <form onSubmit={handleEditTrip}>
        <label>
          Country
          <input name="country" defaultValue={country} minLength={3} required />
        </label>
        <label>
          City
          <input name="city" defaultValue={city} />
        </label>
        <label>
          Title
          <input name="title" defaultValue={title} minLength={3} required />
        </label>
        <label>
          Start date
          <input
            name="startDate"
            type="date"
            defaultValue={startDate}
            required
            onChange={toggleDisabled}
          />
        </label>
        <label>
          End date
          <input
            name="endDate"
            type="date"
            defaultValue={endDate}
            required
            disabled={endDateDisabled}
          />
        </label>
        <CreateButton>Save</CreateButton>
      </form>
      <CancelButton />
    </>
  );
}