Zápis a editace dat pomocí URL parametrů v React Router

Naše aplikace nyní umí načítat data pro každý jednotlivý produkt z úložiště. V této lekci začneme implementovat přidávání informací o produktu a jejich editaci pomocí URL parametrů.

Pro zápis nebo změnu dat budeme znovu používat komponentu Form. Pro začátek otevřeme product.jsx a přidáme na konec verze tlačítko pro editaci dat produktu - za posledním odstavcem (nezapomeňte importovat Form do souboru):

routes/product.jsx<Form action="edit">
  <button type="submit">edit</button>
</Form>

Nyní máme na stránce produktu tlačítko pro editaci. Dále uděláme to, aby nás po kliknutí na toto tlačítko přesměrovalo na stránku s formulářem, kde budeme moci zadávat data. K tomu vytvoříme další route s products/:productId/edit. Pojďme pro to vytvořit šablonu.

Takže, ve složce routes vytvoříme nový soubor edit.jsx. Zde budeme mít formulář s polemi name, cost a amount pro vyplnění, a také tlačítkem pro uložení. Všechno to bude v komponentě EditProduct. Nezapomeňte vyplnit atributy name, budou se nám hodit v následujících lekcích:

routes/edit.jsximport { Form } from 'react-router-dom';

function EditProduct() {
  return (
    <Form method="post" id="product-form">
      <div>
        <span>Name:</span>
        <input placeholder="name" type="text" name="name" />
      </div>
      <div>
        <span>Cost:</span>
        <input placeholder="cost" type="text" name="cost" />
      </div>
      <div>
        <span>Amount:</span>
        <input placeholder="amount" type="text" name="amount" />
      </div>
      <p>
        <button type="submit">save</button>
      </p>
    </Form>
  );
}

export default EditProduct;