Futja e të dhënave në atributin style nga variablat në React

Në mësimin e kaluar ne shkruajtëm një objekt direkt në atributin style. Ne gjithashtu mund të përdorim futje të dhënash në këtë objekt nga variablat.

Le të marrim komponentin tonë React pa stile CSS:

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

Tani do të krijojmë variabla dhe t'u caktojmë atyre vlera të vetive CSS. Le të fillojmë me radhë me stilet për div.

Në skedarin e komponentit para komandës return le të krijojmë variablin wd1 dhe t'i caktojmë vlerën '200px':

const wd1 = '200px';

Në mënyrë të ngjashme le të krijojmë variabla për të gjitha vlerat e vetive të div-it tonë:

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

Tani le të shtojmë variabla për paragrafin e parë:

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

Për paragrafin e dytë:

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

Dhe, së fundmi, për të fundit. Këtu do të nevojiten vetëm dy, jo tre variabla. Nuk ka kuptim të përsëritemi, sepse vlera bold ne tashmë e kemi për paragrafin e parë:

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

Tani ne do t'i zëvendësojmë variablat me vlerat e stileve. Le ta bëjmë këtë për paragrafin e parë. Le të fusim variablat co1 dhe fw1 në vend të vlerave në objekt:

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

Në mënyrë të ngjashme do të veprojmë me etiketat e mbetura.

Si rezultat, kodi i komponentit tonë do të duket kështu:

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>
	);
}

Modifikoni kodin e zgjidhjes së problemit nga mësimi i kaluar në mënyrë që vlerat e vetive CSS të ruhen në variabla.