Καταγραφή και επεξεργασία δεδομένων μέσω παραμέτρων URL στο React Router

Η εφαρμογή μας μπορεί πλέον να φορτώνει δεδομένα για κάθε μεμονωμένο προϊόν από το χώρο αποθήκευσης. Σε αυτό το μάθημα, θα αρχίσουμε να υλοποιούμε την προσθήκη πληροφοριών για το προϊόν και την επεξεργασία τους μέσω παραμέτρων URL.

Για να εισάγουμε ή να αλλάζουμε δεδομένα θα χρησιμοποιήσουμε ξανά το στοιχείο Form. Αρχικά, ας ανοίξουμε το product.jsx και ας προσθέσουμε στο τέλος της δομής ένα κουμπί για την επεξεργασία δεδομένων του προϊόντος - μετά την τελευταία παράγραφο (μην ξεχάσετε να εισαγάγετε το Form στο αρχείο):

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

Τώρα έχουμε ένα κουμπί επεξεργασίας στη σελίδα του προϊόντος. Στη συνέχεια, θα τακτοποιήσουμε τα πράγματα έτσι ώστε όταν πατηθεί αυτό το κουμπί, να μεταφερόμαστε σε μια σελίδα με μια φόρμα, όπου θα μπορούμε να εισάγουμε δεδομένα. Για να το κάνουμε αυτό, θα δημιουργήσουμε μια ακόμη διαδρομή με products/:productId/edit. Ας δημιουργήσουμε ένα layout για αυτό.

Λοιπόν, στο φάκελο 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, στην οποία θα υπάρχει μια φόρμα για συμπλήρωση δεδομένων σχετικά με τον μαθητή.