React'те бала компоненттерге стейттерди берүү

Бизде товарлар менен массив берилсин дейли:

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 компоненти түзүңүз.