Example:
export async function action(data: any) {
const { request } = data;
...
const formData = await request.formData();
...
}
Additionally, you cannot simply console log a FormData object to get the field data, but instead you'll need to access its field data.
Examples:
const formData = new FormData();
formData.set("foo", 123);
formData.set("bar", "barbar");
formData.append("foo", 456);
console.log("formData", formData); // no field data
console.log("get foo", formData.get("foo"));
console.log("getAll foo", formData.getAll("foo"));
console.log("get entries", ...formData.entries());
The form you are submitting doesn't have a "description" field, it has title and content fields.
export default function Note() {
return (
<form method="post" action="/notes" id="quote-form">
<p>
<label htmlFor="title">Title</label>
<input type="text" id="title" name="title" required />
</p>
<p>
<label htmlFor="content">Content</label>
<textarea id="content" name="content" required />
</p>
<div>
<button type="submit">Add Note</button>
</div>
</form>
);
}
export async function action(data: any) {
const { request } = data;
const formData = await request.formData();
console.log("formData", ...formData.entries());
const noteData: Note = {
title: formData.get("title")?.toString() ?? "",
description: formData.get("content")?.toString() ?? "",
};
const note = createNote(noteData);
console.log(`New note created => Note - ${JSON.stringify(note)}`);
}
