Scrittura e modifica dei dati tramite parametri URL in React Router

La nostra applicazione ora può caricare i dati per ogni singolo prodotto dal magazzino. In questa lezione inizieremo a implementare l'aggiunta di informazioni sul prodotto e la loro modifica tramite parametri URL.

Per inserire o modificare i dati utilizzeremo nuovamente il componente Form. Per iniziare, apriamo product.jsx e aggiungiamo alla fine del markup un pulsante per modificare i dati del prodotto - dopo l'ultimo paragrafo (non dimenticare di importare Form nel file):

<Form action="edit">
	<button type="submit">modifica</button>
</Form>

Ora abbiamo un pulsante di modifica sulla pagina del prodotto. Successivamente, faremo in modo che quando si clicca su questo pulsante si venga reindirizzati a una pagina con un modulo, dove potremo inserire i dati. Per fare ciò, creeremo un'altra route con products/:productId/edit. Creiamo un layout per questo.

Quindi, nella cartella routes creeremo un nuovo file edit.jsx. Qui avremo un modulo con campi name, cost e amount da compilare, oltre a un pulsante di salvataggio. Tutto questo sarà nel componente EditProduct. Assicuriamoci di specificare gli attributi name, ci serviranno nelle prossime lezioni:

import { Form } from 'react-router-dom';

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Nome:</span>
				<input placeholder="nome" type="text" name="name" />
			</div>
			<div>
				<span>Costo:</span>
				<input placeholder="costo" type="text" name="cost" />
			</div>
			<div>
				<span>Quantità:</span>
				<input placeholder="quantità" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">salva</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Prendi l'applicazione che hai creato nei compiti delle lezioni precedenti. Utilizzando il materiale della lezione, aggiungi un pulsante per modificare i dati dello studente. Crea il file edit.jsx per la modifica con la funzione EditStudent, che conterrà un modulo per compilare i dati dello studente.