React POST Requests: Send Data Using Fetch API

import { useState } from "react";

function EnrolmentForm() {
  const [formData, setFormData] = useState({ name: "", course: "" });
  const [submitting, setSubmitting] = useState(false);
  const [message, setMessage] = useState(null);

  function handleChange(event) {
    const { name, value } = event.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  }

  async function handleSubmit(event) {
    event.preventDefault();
    setSubmitting(true);
    setMessage(null);

    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData)
      });

      if (!response.ok) {
        throw new Error("Enrolment failed. Please try again.");
      }

      await response.json();
      setMessage({ type: "success", text: "Enrolment successful" });
      setFormData({ name: "", course: "" });
    } catch (err) {
      setMessage({ type: "error", text: err.message });
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Your name"
      />
      <input
        name="course"
        value={formData.course}
        onChange={handleChange}
        placeholder="Course name"
      />

      <button type="submit" disabled={submitting}>
        {submitting ? "Submitting..." : "Enrol"}
      </button>

      {message && (
        <p className={message.type}>{message.text}</p>
      )}
    </form>
  );
}

export default EnrolmentForm;