Пропс компоненти у React-у

У претходној лекцији смо приказали неколико инстанци производа:

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

Засад сваки позив тага производа приказује исту ствар на екрану. Хајде сада да учинимо сваки производ јединственим.

Нека, на пример, сваки производ има назив и цену. Учинимо тако да сваки позив тага производа прикаже производ са својим именом и ценом, форматираним у жељени изглед.

За то треба да предузмемо неколико корака.

За почетак, при позиву тага производа, у таг ћемо уписати два атрибута: атрибут name са називом производа и атрибут cost са ценом, ево овако:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Имена и вредности ових атрибута ће стизати у виду објекта у први параметар функције-конструктора наше компоненте Product:

function Product(props) {
	console.log(props); // објекат са кључевима name и cost
	
	return <p>
		product
	</p>;
}

Име параметра може бити било које, али у React-у је уобичајено да се зове props. То заправо није само име параметра, већ важна концепција React-а.

Суштина ове концепције је следећа: при позиву тага компоненте у таг се могу уписати атрибути са подацима. Ови подаци ће стизати у пропсе компоненте. Затим компонента може да користи те податке, на пример, за формирање жељеног изгледа.

Хајде да то урадимо:

function Product(props) {
	return <p>
		name: <span>{props.name}</span>,
		cost: <span>{props.cost}</span>
	</p>;
}

Погодније и уобичајеније је да се не користи објекат props, већ одмах изврши деструктурирање пропса директно у параметрима функције:

function Product({ name, cost }) {
	return <p>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</p>;
}

Направите компоненту Employee која приказује податке запосленог на екрану. Нека ти подаци буду презиме, име, име оца и плата. Форматирајте те податке у жељени изглед. Прикажите у компоненти App три запослена са различитим подацима.