Χρήση States στο React

Ας χρησιμοποιήσουμε τη συνάρτηση useState για τη δημιουργία ενός state που περιέχει το όνομα του προϊόντος:

const state = useState('prod');

Ως αποτέλεσμα, η σταθερά state θα αντιπροσωπεύει έναν πίνακα, στο πρώτο στοιχείο του οποίου θα αποθηκεύεται το όνομα του προϊόντος, και στο δεύτερο - μια συνάρτηση για αλλαγή του ονόματος:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

Για συντομία, συνήθως δεν χρησιμοποιούμε ενδιάμεση σταθερά για τον πίνακα, αλλά χρησιμοποιούμε αποδόμηση:

const [name, setName] = useState('prod');

Ας εμφανίσουμε τώρα το state με το όνομα προϊόντος σε κάποια σήμανση:

return <p>
	<span>{name}</span>
</p>;

Ας τα ενώσουμε όλα μαζί και θα πάρουμε τον ακόλουθο κώδικα:

import React, { useState } from 'react';

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
	</div>;
}

export default App;

Εάν εκτελέσετε αυτόν τον κώδικα, αρχικά στο div θα εμφανιστεί η αρχική τιμή του state, στην περίπτωσή μας 'prod'. Κατά την αλλαγή του state μέσω της συνάρτησης setName, στη σήμανση θα εμφανιστεί αυτόματα η νέα τιμή του state.

Ας υποθέσουμε ότι θέλετε να εμφανίσετε στην οθόνη τα δεδομένα του χρήστη: το όνομα, το επώνυμό του, την ηλικία του. Δημιουργήστε για αυτό τα αντίστοιχα states με αρχικές τιμές.