form-react-raiz.tsx

/*
{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es6",
    "lib": [
      "es2019",
      "dom",
      "dom.iterable" // <- make sure you have this on your tsconfig
    ],
    // ...
}

PS: Make sure your inputs have a "name" attribute
*/

import { FormEventHandler } from 'react';

export default function CarForm() {
  const handleSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();

    const form = event.currentTarget;
    const formData = new FormData(form);
    const formValues = Object.fromEntries(formData.entries());

    console.log(formValues);

    const res = await fetch('/api/cars', {
      body: JSON.stringify(formValues),
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
    });

    const result = await res.json();
    console.log(result);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="make" className="form-label">
        Make
      </label>
      <input name="make" type="text" className="form-control" />

      <label htmlFor="model" className="form-label">
        Model
      </label>
      <input name="model" type="text" className="form-control" />

      <label htmlFor="image" className="form-label">
        Image
      </label>
      <input name="image" type="text" className="form-control" />

      <label htmlFor="description" className="form-label">
        Description
      </label>
      <textarea name="description" type="text" className="form-control" />

      <button className="btn btn-primary" type="submit">
        Create Car
      </button>
    </form>
  );
}