Criando uma Rota para Editar Dados no React Router

Na lição anterior, criamos um formulário de edição em um componente React separado EditProduct.

Agora vamos escrever a função loader para a nova rota, logo após as importações e antes da função EditProduct. Ela será igual à do product.jsx. Os parâmetros de URL serão passados para a função e, em seguida, obteremos o produto pelo seu id:

routes/edit.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

Vamos importar getProduct do forStorage.js:

routes/edit.jsximport { getProduct } from '../forStorage';

Agora, vamos abrir nosso main.jsx e importar o componente que criamos, EditProduct, e o loader:

main.jsximport EditProduct, { loader as editProductLoader } from './routes/edit';

Em seguida, adicionaremos ao array children um objeto de rota para edição, logo após a rota do produto:

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
  {
    path: 'products/:productId/edit',
    element: <EditProduct />,
    loader: editProductLoader,
  },
],

Agora, vamos iniciar o aplicativo, criar um produto, clicar nele e depois no botão de edição para ver nosso formulário.

Única coisa, ainda precisamos fazer com que os campos do formulário sejam pré-preenchidos com os dados atuais antes da edição. Para isso, importaremos no edit.jsx o hook useLoaderData:

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

E o aplicaremos para obter os dados do loader na função EditProduct. Vamos adicioná-lo antes do comando return:

routes/edit.jsxconst { product } = useLoaderData();

Agora, adicionaremos a cada tag de input o atributo defaultValue com os valores correspondentes para cada input. Por exemplo, o primeiro input ficará assim:

routes/edit.jsx<input
  placeholder="name"
  type="text"
  name="name"
  defaultValue={product.name}
/>

Para os dois inputs restantes, os valores serão respectivamente 'product.cost' e 'product.amount'. No entanto, por enquanto, ainda não temos os dados no formulário.