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):

routes/product.jsx<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:

routes/edit.jsximport { 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;