Вметнување на податоци во атрибутот style од променливи во React

Во претходната лекција напишавме објект директно во атрибутот style. Можеме исто така да користиме вметнување на податоци во овој објект од променливи.

Да го земеме нашиот React компонент без CSS стилови:

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

Сега ќе креираме променливи и ќе им доделуваме вредности на CSS својствата. Да почнеме по ред со стиловите за div-от.

Во датотеката на компонентата пред командата 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>

На сличен начин постапуваме со останатите тагови.

Како резултат, нашиот код на компонентата ќе изгледа вака:

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 својствата ќе се чуваат во променливи.