Switch Disabled-Attribute based of the value of another input-field

[Pia-Lueling]

Hi :),

we want to set the disabled attribute to false if the startDate-value is empty and to true if the starDate-value is not empty. We set the state for the disabled-attribute with the default-value "true" and added a handler function that sets the state to the opposite if the startDate is picked.

Unfortunately if we delete the startDate the endDate should be disabled again and that doesn't work and we don't know why!

we already googled and tried some different events like onClick, onChange, onEmptied, onTextInput but nothing works.

Do you have any idea how to change the handler function and/or which event we should use?

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

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

  const [isDisabled, setIsDisabled] = useState(true);

  function handleDisabled() {
    setIsDisabled(!isDisabled);
  }

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

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

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

    const response = await fetch("/api/trips", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newTrip),
    });

    if (!response.ok) {
      console.error(response.status);
      return;
    }

    mutate();
    router.push("/");
  }

  return (
    <>
      <form onSubmit={handleAddTrip}>
        <label>
          Country
          <input
            name="country"
            placeholder="Country of your trip"
            minLength={3}
            required
            autoFocus
          />
        </label>
        <label>
          City
          <input name="city" placeholder="City of your trip" />
        </label>
        <label>
          Title
          <input
            name="title"
            placeholder="Title of your trip"
            minLength={3}
            required
          />
        </label>
        <label>
          Start date
          <input
            name="startDate"
            type="date"
            required
            onChange={handleDisabled}
          />
        </label>
        <label>
          End date
          <input name="endDate" type="date" required disabled={isDisabled} />
        </label>
        <CreateButton>Create</CreateButton>
      </form>
      <CancelButton />
    </>
  );
}

Thanks in advance and we are looking forward your feedback! 💚

[JessicaLoers]

Hey @Pia-Lueling
could you please add the corresponding PR as a link? 🥹

[moonwave99]

Hey @Pia-Lueling ^^

Your handleDisabled is not checking whether the date is set or not! You could for instance:

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

This way, is the date is set, disabled will be false, and the opposite otherwise. Let us know if it works!

(by the way, I would call the state [endDateDisabled, setEndDateDisabled])

[JessicaLoers]

@moonwave99 was slightly faster than me and had more efficient way ✨

[Pia-Lueling]

@moonwave99 Thank you very much! it works perfectly :)

[moonwave99]

@JessicaLoers yours was not bad either!

[JessicaLoers]

I'll try it without PR - so this is more of a wild guess. 😁

I guess the problem is with your handleDisabled function.

When you use setIsDisabled(!isDisabled), you're just toggling the isDisabled state.
Instead, you should check the value of the startDate input to determine the correct state of isDisabled.

Here is a suggestion which checks the value of the startDate input whenever there's a change. If the input is empty, isDisabled is set to true, otherwise it's set to false.

function handleDisabled(event) {
    const startDateValue = event.target.value;
    if (startDateValue === "") {
        setIsDisabled(true);
    } else {
        setIsDisabled(false);
    }
}

Feel free to try this approach and give me some frog feedback 🐸