Solution

You'll build a form where one control reshapes another — the return field switches on and off with the trip type, and the Book button reflects a rule that spans two fields.

The problem, in plain English

There are three controls: a trip-type dropdown and two dates. They're not independent. Picking "one-way" makes the return date meaningless, so it should be disabled. Picking "return" turns it on, but now a new rule applies: you can't return before you depart, so the Book button has to refuse an invalid pair. The skill is letting these relationships fall out of a little derived state rather than scattering enable/disable flags around.

The mental model

Keep only the raw inputs in state: type, depart, and ret. Everything else — whether the return field is enabled, whether the dates are valid, whether Book is allowed — is derived from those three on each render. ISO date strings compare correctly with <, so the validation is a one-liner. State holds the facts; the UI's enabled/disabled/invalid states are computed views of them.

A first attempt

A first pass often leaves both dates always editable and skips the cross-field rule:

export default function App() {
  const [type, setType] = useState('one-way');
  const [depart, setDepart] = useState('');
  const [ret, setRet] = useState('');

  return (
    <>
      <select value={type} onChange={(e) => setType(e.target.value)}>…</select>
      <input type="date" value={depart} onChange={(e) => setDepart(e.target.value)} />
      <input type="date" value={ret} onChange={(e) => setRet(e.target.value)} />
      <button onClick={book}>Book</button> {/* always enabled */}
    </>
  );
}

This "works" but lets the user book nonsense: a return date is editable even for a one-way trip, and you can book a return flight that comes home before it leaves. The fields look independent, but the spec says they aren't — the missing piece is derived enable/validate logic tying them together.

The working solution

import { useState } from 'react';
import './styles.css';

export default function App() {
  const [type, setType] = useState('one-way');
  const [depart, setDepart] = useState('2026-07-01');
  const [ret, setRet] = useState('2026-07-08');
  const [booked, setBooked] = useState(null);

  // Derived from the inputs — nothing stored.
  const isReturn = type === 'return';
  const datesInvalid = isReturn && ret < depart; // ISO strings compare correctly
  const canBook = depart !== '' && (!isReturn || (ret !== '' && !datesInvalid));

  function book() {
    setBooked(
      isReturn
        ? `Booked a return flight departing ${depart}, returning ${ret}.`
        : `Booked a one-way flight on ${depart}.`,
    );
  }

  if (booked) {
    return (
      <main className="container">
        <h1>Flight Booker</h1>
        <div className="booked">
          <h2>✈ Confirmed</h2>
          <p>{booked}</p>
          <button onClick={() => setBooked(null)}>Book another</button>
        </div>
      </main>
    );
  }

  return (
    <main className="container">
      <h1>Flight Booker</h1>
      <div className="flight-booker">
        <select value={type} onChange={(e) => setType(e.target.value)}>
          <option value="one-way">One-way flight</option>
          <option value="return">Return flight</option>
        </select>
        <input type="date" value={depart} onChange={(e) => setDepart(e.target.value)} />
        <input
          type="date"
          value={ret}
          disabled={!isReturn}
          className={datesInvalid ? 'invalid' : ''}
          onChange={(e) => setRet(e.target.value)}
        />
        <button className="book" type="button" disabled={!canBook} onClick={book}>
          Book
        </button>
      </div>
    </main>
  );
}

The shifts: isReturn, datesInvalid, and canBook are computed each render from the three inputs, so the return field's disabled, its invalid class, and the Book button's disabled all stay correct automatically. The cross-field rule is the single expression ret < depart, made trivial by ISO date strings sorting lexically.

Walking through one call

Start at type = 'one-way', depart = '2026-07-01', ret = '2026-07-08'.

1. One-way render. isReturn is false, so the return input is disabled; datesInvalid is false; canBook is depart !== '' → true. Book is enabled.
2. The user switches to "return". setType('return') re-renders. Now isReturn is true, the return input enables, and canBook checks the dates: '2026-07-08' < '2026-07-01' is false, so still valid — Book stays enabled.
3. They change the return date to 2026-06-20. datesInvalid becomes '2026-06-20' < '2026-07-01' → true. The return field gets the invalid class (red border) and canBook is false — Book disables.
4. They fix it to 2026-07-10. datesInvalid flips back to false; Book re-enables. Clicking it sets booked to the return-trip message and the confirmation view renders.

Every enable/disable/invalid state recomputed itself from type/depart/ret — no manual flag juggling.

Gotchas

• Leaving the return field always editable. It's meaningless for a one-way trip. Fix: disabled={!isReturn}.
• Skipping cross-field validation. Nothing stops a return-before-departure booking. Fix: derive datesInvalid and gate the Book button on it.
• Parsing dates the hard way. new Date(a) > new Date(b) works but is overkill. Fix: ISO yyyy-mm-dd strings compare directly with <.
• Storing canBook/isValid in state. It drifts from the inputs. Fix: derive it during render.

Going further

• Min dates. Set the inputs' min to today so past dates can't be chosen, and the return's min to the departure date.
• Inline error text. Show "Return must be on or after departure" beside the flagged field instead of just a red border.
• Passenger count / multi-city. Add more linked fields, each feeding the same derived-validation pattern.

Alternative solutions

import { useState } from 'react';
import './styles.css';

type BookingState = { type: string; depart: string; ret: string; booked: string | null };

export default function App() {
  const [state, setState] = useState<BookingState>({ type: 'one-way', depart: '2026-07-01', ret: '2026-07-08', booked: null });
  const update = (patch: Partial<BookingState>) => setState((current) => ({ ...current, ...patch }));
  const isReturn = state.type === 'return';
  const datesInvalid = isReturn && state.ret < state.depart;
  const canBook = state.depart !== '' && (!isReturn || (state.ret !== '' && !datesInvalid));

  function book() {
    update({ booked: isReturn
      ? `Booked a return flight departing ${state.depart}, returning ${state.ret}.`
      : `Booked a one-way flight on ${state.depart}.` });
  }

  return (
    <main className="container">
      <h1>Flight Booker</h1>
      {state.booked ? (
        <div className="booked"><h2>✈ Confirmed</h2><p>{state.booked}</p><button onClick={() => update({ booked: null })}>Book another</button></div>
      ) : (
        <div className="flight-booker">
          <select value={state.type} onChange={(e) => update({ type: e.target.value })}>
            <option value="one-way">One-way flight</option><option value="return">Return flight</option>
          </select>
          <input type="date" value={state.depart} onChange={(e) => update({ depart: e.target.value })} />
          <input type="date" value={state.ret} disabled={!isReturn} className={datesInvalid ? 'invalid' : ''} onChange={(e) => update({ ret: e.target.value })} />
          <button className="book" type="button" disabled={!canBook} onClick={book}>Book</button>
        </div>
      )}
    </main>
  );
}