Εισαγωγή δεδομένων στο χαρακτηριστικό style από μεταβλητές στο React

Στο προηγούμενο μάθημα γράψαμε αντικείμενο απευθείας στο χαρακτηριστικό style. Μπορούμε επίσης να χρησιμοποιήσουμε εισαγωγή δεδομένων σε αυτό το αντικείμενο από μεταβλητές.

Ας πάρουμε το React component μας χωρίς CSS στυλ:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

Τώρα θα δημιουργήσουμε μεταβλητές και θα τους αναθέσουμε τιμές CSS ιδιοτήτων. Ας ξεκινήσουμε με τη σειρά με τα στυλ για το div.

Στο αρχείο του component πριν από την εντολή return δημιουργούμε τη μεταβλητή wd1 και της αναθέτουμε την τιμή '200px':

const wd1 = '200px';

Με παρόμοιο τρόπο δημιουργούμε μεταβλητές για όλες τις τιμές των ιδιοτήτων του div μας:

const wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Τώρα ας προσθέσουμε μεταβλητές για την πρώτη παράγραφο:

const co1 = 'orangered';
const fw1 = 'bold';

Για τη δεύτερη παράγραφο:

const fs1 = 'italic';
const co2 = 'brown';

Και, τελικά, για την τελευταία. Εδώ θα χρειαστούμε μόνο δύο, όχι τρεις μεταβλητές. Δεν έχει νόημα να επαναλαμβανόμαστε, αφού η τιμή bold την έχουμε ήδη για την πρώτη παράγραφο:

const bco1 = 'orange';
const co3 = 'white';

Και τώρα θα αντικαταστήσουμε τις μεταβλητές με τις τιμές των στυλ. Ας το κάνουμε για την πρώτη παράγραφο. Ας εισάγουμε τις μεταβλητές co1 και fw1 αντί για τις τιμές στο αντικείμενο:

<p style = {{ color: co1, fontWeight: fw1 }}>
	text
</p>

Με παρόμοιο τρόπο θα προχωρήσουμε με τις υπόλοιπες ετικέτες.

Στο τέλος, ο κώδικας του component μας θα μοιάζει έτσι:

function App() {
	const wd1 = '200px';
	const br1 = '2px solid brown';
	const pd1 = '10px';
	const ta1 = 'center';

	const co1 = 'orangered';
	const fw1 = 'bold';

	const fs1 = 'italic';
	const co2 = 'brown';
	
	const bco1 = 'orange';
	const co3 = 'white';

	return (
		<div style = {{
			width: wd1,
			border: br1,
			padding: pd1,
			textAlign: ta1 }}>
			<p style = {{ color: co1, fontWeight: fw1 }}>
				text
			</p>
			<p style = {{ fontStyle: fs1, color: co2 }}>
				text
			</p>
			<p style = {{ 
				backgroundColor: bco1,
				fontWeight: fw1,
				color: co3 }}>
				text
			</p>
		</div>
	);
}

Τροποποιήστε τον κώδικα λύσης της άσκησης από το προηγούμενο μάθημα έτσι, ώστε οι τιμές των CSS ιδιοτήτων να αποθηκεύονται σε μεταβλητές.