Gravação e edição de dados por parâmetros de URL no React Router

Nossa aplicação agora pode carregar dados para cada produto individual a partir do armazenamento. Nesta lição, começaremos a implementar a adição de informações do produto e sua edição através de parâmetros de URL.

Para gravar ou alterar dados usaremos novamente o componente Form. Para começar, vamos abrir product.jsx e adicionar no final do layout um botão para editar os dados do produto - após o último parágrafo (não se esqueça de importar Form no arquivo):

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

Agora temos um botão de edição na página do produto. Em seguida, vamos fazer com que ao clicar neste botão sejamos redirecionados para uma página com um formulário, onde poderemos inserir dados. Para isso, criaremos outra rota com products/:productId/edit. Vamos criar um layout para isso.

Então, na pasta routes, criaremos um novo arquivo edit.jsx. Aqui teremos um formulário com os campos name, cost e amount para preencher, além de um botão de salvar. Tudo isso estará no componente EditProduct. Certifique-se de especificar os atributos name, eles serão necessários nas próximas lições:

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>Custo:</span>
				<input placeholder="custo" type="text" name="cost" />
			</div>
			<div>
				<span>Quantidade:</span>
				<input placeholder="quantidade" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">salvar</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Pegue a aplicação criada por você nas tarefas das lições anteriores. Usando os materiais da lição, adicione um botão de edição de dados do estudante. Crie o arquivo edit.jsx para edição com a função EditStudent, que conterá um formulário para preencher os dados do estudante.