React RouterにおけるURLパラメータによるデータの記録と編集

私たちのアプリケーションは、ストレージから個々の商品ごとにデータを読み込めるようになりました。このレッスンでは、URLパラメータを使用した商品情報の追加と編集機能の実装を開始します。

データを記録または変更するために、再びFormコンポーネントを使用します。まずは、product.jsxを開き、最後の段落の後に商品データを編集するためのボタンを追加しましょう（ファイルにFormをインポートすることを忘れないでください）：

<Form action="edit">
	<button type="submit">編集</button>
</Form>

これで商品ページに編集ボタンができました。次に、このボタンをクリックすると、データを入力できるフォームページにリダイレクトされるようにします。そのために、products/:productId/editという別のルートを作成します。まずそのためのコンポーネントを作成しましょう。

それでは、routesフォルダ内に新しいファイルedit.jsxを作成します。ここには、入力用のフィールドname、cost、amountと保存ボタンを持つフォームを配置します。これらはすべてEditProductコンポーネント内に記述します。name属性は必ず記述してください。これらは次のレッスンで必要になります：

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>名前：</span>
				<input placeholder="名前" type="text" name="name" />
			</div>
			<div>
				<span>価格：</span>
				<input placeholder="価格" type="text" name="cost" />
			</div>
			<div>
				<span>数量：</span>
				<input placeholder="数量" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">保存</button>
			</p>
		</Form>
	);
}

export default EditProduct;

これまでのレッスンの課題で作成したアプリケーションを使用してください。レッスンの内容を参考にして、学生データを編集するボタンを追加してください。編集用のファイルedit.jsxを作成し、学生情報を入力するフォームを持つEditStudent関数を実装してください。