Formularios con acción

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

En HTML puro, el action de un form es una URL a la que se hace un POST. En Next.js puedes pasarle una función en su lugar:

import { addItem } from './actions';

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

Al hacer submit, React hace tres cosas por ti: detiene la recarga de página habitual del navegador al hacer submit, recopila los campos con nombre del formulario en un objeto FormData y llama a tu action con él.

Note lo que no está allí: sin onSubmit, sin event.preventDefault(), sin estado. Y esta página sigue siendo un Server Component: la action son datos que se pasan, no un controlador de eventos, por lo me cruza el límite sin problemas.

Una cosa a tener en cuenta: el item se guarda, pero la list en pantalla no cambiará todavía. La página ya se renderizó en el server, y nada le ha dicho que vuelva a mirar. Dentro de dos lecciones solucionarás eso en una sola línea.

Desafío

Principiante

La lista de compras tiene un input y un button, pero nada los conecta al server. La action ya está escrita para ti en app/actions.js.

En app/page.jsx, importa addItem desde './actions'.
Envuelve el input y el button en un <form> con id="add-form".
Dale a ese form action={addItem}.

Deja intacto el name="text" del input: la action lee el campo por ese nombre.

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>
    );
}