zrozumiecReact.pl

import { sendDataToServer } from "./api"
import { useFormStatus } from "react-dom";

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button>{pending ? "Zapis w toku..." : "Zapisz"}</button>
}

export default function App() {
  return (
    <form>
      <h1>Formularz zapisu na konferencję</h1>
      <div>
        <label>Imię: <input type="text" name="name"/></label>
      </div>
      <div>
        <label>Rozmiar koszulki:
          <select name="size" defaultValue="">
            <option value="" disabled>Wybierz rozmiar koszulki</option>
            <option value="s">S</option>
            <option value="m">M</option>
            <option value="l">L</option>
          </select>
        </label>
      </div>
      <div>
        Czy chesz wziąć udział w dodatkowych zajęciach:
        <div>
          <label>
            <input type="radio" name="extras" value="yes"/>Tak
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="extras" value="no"/>Nie
          </label>
        </div>
      </div>
      <div>
        <label>
          Liczba noclegów: <input type="number" name="nights"/>
        </label>
      </div>
      <div>
        <button>Zapisz</button>
      </div>
    </form>
  );
}