რეაქტში სტეიტების შვილ კომპონენტებში გადაცემა

დავუშვათ, გვაქვს მოცემული პროდუქტების მასივი:

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

დავუშვათ, ეს მასივი მდებარეობს კომპონენტში Products. ჩავწეროთ ეს პროდუქტები კომპონენტის სტეიტში:

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

ახლა მოდით გადავუყვეთ პროდუქტებს ციკლით და გამოვსახოთ ისინი რაიმე ვერსტკაში:

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

როგორც ხედავთ, ჩვენი ციკლის map შიგთავსი საკმაოდ რთულია, განსაკუთრებით თუ პროდუქტის ვერსტკა შემდგომში გაიზრდება. ასეთი სირთულე ართულებს კოდის წაკითხვას, გაგებას და მოვლას.

უკეთესი იქნება პროდუქტის ჩვენებისთვის პასუხისმგებელი კოდი გამოვყოთ ცალკე კომპონენტში. დავარქვათ მას Product. აქ არის ჩვენი კომპონენტის კოდი:

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

მოდით ახლა კომპონენტის Products შიგნით ციკლში map გამოვიყენოთ შვილობილი კომპონენტები Product:

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

როგორც ხედავთ, ახლა ციკლის კოდი გამარტივდა და გახდა უფრო გასაგები. გარდა ამისა, ახლა პროდუქტის ჩვენებისთვის პასუხისმგებელია ცალკე კომპონენტი, რომელშიც ჩვენ შეგვიძლია გავაკეთოთ, შემდეგ კი შევცვალოთ პროდუქტების ვერსტკა.

ტექნიკურად, ჩვენ გვაქვს ის, რომ მშობელ კომპონენტს აქვს სტეიტი მონაცემებით, ხოლო შვილობილ კომპონენტები იღებენ ამ მონაცემებს პროფების სახით და გამოსახავენ მათ ჩვენთვის სასურველი ფორმით.

კომპონენტის Users სტეიტში მოცემულია შემდეგი მასივი:

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},
];

გადაუარეთ ამ მასივს ციკლით და გამოიტანეთ ყველა მომხმარებელი ეკრანზე. შექმენით მომხმარებლის გამოსახატველად ცალკე კომპონენტი User.