React'ta Alt Bileşenlere State Aktarımı

Bir ürün dizimiz olduğunu varsayalım:

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

Bu dizinin Products bileşeninde bulunduğunu varsayalım. Bu ürünleri bileşenin state'ine yazalım:

function Products() {
	const [prods, setProds] = useState(initProds);
}

Şimdi ürünleri bir döngü ile geçelim ve bunları bir çeşit işaretleme içinde gösterelim:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

Gördüğünüz gibi, map döngümüzün içeriği yeterince karmaşık, özellikle de ürün işaretlemesi ileride daha da büyürse. Bu tür bir karmaşıklık okumayı, anlamayı ve kodun bakımını zorlaştırır.

Ürünün görüntülenmesinden sorumlu kodu ayrı bir bileşene çıkarmak daha iyi olacaktır. Ona Product adını verelim. İşte bileşenimizin kodu:

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

Şimdi Products bileşeninin içinde map döngüsünde alt bileşenler olarak Product bileşenlerini kullanalım:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Gördüğünüz gibi, artık döngünün kodu basitleşti ve anlaşılması daha kolay hale geldi. Ayrıca, artık ürünün görüntülenmesinden ayrı bir bileşen sorumlu, burada ürünlerin işaretlemesini yapabilir ve daha sonra düzenleyebiliriz.

Teknik olarak, ana bileşenin veri içeren bir state'i var ve alt bileşenler bu verileri prop'lar şeklinde alıyor ve onları bizim istediğimiz şekilde görüntülüyor.

Users bileşeninin state'inde aşağıdaki dizi verilmiştir:

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

Bu diziyi bir döngü ile geçin ve tüm kullanıcıları ekranda gösterin. Kullanıcıyı görüntülemek için ayrı bir User bileşeni oluşturun.