Props za Viungo katika React

Katika somo lililopita tuliweka onyesho kadhaa za bidhaa:

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

Kwa sasa kila wakati tag ya bidhaa inatumiwa, inaweka onyesho kilekile kwenye skrini. Sasa tufanye kila bidhaa iwe ya kipekee.

Hebu tuchukulie, kwa mfano, kila bidhaa inahitaji kuwa na jina na bei. Tufanye hivi: kila wakati tag ya bidhaa inapotumiwa, iweze kuweka onyesho la bidhaa yenye jina lake na bei yake, iliyopangwa katika muundo tuliotaka.

Ili kufikia hili, tunahitaji kufanya hatua kadhaa.

Kwanza, wakati wa kutumia tag ya bidhaa, tutaandika sifa mbili ndani ya tag hiyo: sifa name iliyo na jina la bidhaa na sifa cost iliyo na bei, kama ifuatavyo:

function App() {
	return <div>
		<Product name="bidhaa1" cost="100" />
		<Product name="bidhaa2" cost="200" />
		<Product name="bidhaa3" cost="300" />
	</div>;
}

Majina na maadili ya sifa hizi zitaingia kwenye kitu cha kwanza cha kigezo cha kazi-msanidi wa kiungo chetu Product:

function Product(props) {
	console.log(props); // kitu kilicho na funguo name na cost
	
	return <p>
		bidhaa
	</p>;
}

Jina la kigezo kinaweza kuwa lolote, lakini katika React imezoeleka kuitwa props. Kwa hakika hii si tu jina la kigezo, bali ni dhana muhimu ya React.

Kiini cha dhana hii ni kifuatacho: wakati wa kutumia tag ya kiungo, kwenye tag hii unaweza kuandika sifa zilizo na data. Data hii itaingia katika props za kiungo. Kisha kiungo kinaweza kutumia data hii, kwa mfano, kwa kuunda muundo unaohitajika.

Hebu tufanye hivi:

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

Ni rahisi zaidi na kimezoeleka zaidi kutotumia kitu props moja kwa moja, bali kufanya utenganuzi wa props moja kwa moja kwenye viambajengo vya kazi:

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

Tengeneza kiungo Employee, kiweze kuweka data ya mfanyikazi kwenye skrini. Hebu data hizi ziwe jina la ukoo, jina la kwanza, jina la kati na mshahara. Panga data hizi katika muundo unayotaka. Weka onyesho la wafanyikazi watatu wenye data tofauti kwenye kiungo App.