Lectura de datos del formulario

Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 31 de 47.

Tu action recibe un argumento: un objeto FormData. Es un objeto integrado del navegador y solo necesitas un método de él:

export async function addNote(formData) {
    const text = formData.get('text');
    const author = formData.get('author');
    saveNote(text, author);
}

El string que pasas a get() no es el id del input, ni tampoco su etiqueta. Es el atributo name:

<input name="author" />      →  formData.get('author')

Un input sin name es invisible para el formulario. Se renderiza, puedes escribir en él, y su valor simplemente nunca llega: formData.get() devuelve null. Este es el error más común en un primer formulario con server action, y falla de forma silenciosa.

get() siempre devuelve una cadena de texto (o null), por lo que un campo numérico necesita ser convertido:

const quantity = Number(formData.get('quantity'));

Desafío

Fácil

El formulario de notas está conectado, pero no se guarda nada útil: los input no tienen name y la action guarda dos cadenas vacías.

En app/page.jsx, añade name="text" al primer input y name="author" al segundo.
En app/actions.js, lee ambos campos de formData en lugar de usar las cadenas vacías.

Mantén los id como están y mantén la llamada a saveNote(text, author): solo cambian los dos valores sobre ella.

Pruébalo tú mismo

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}