Overførsel af tilstande til underkomponenter i React

Lad os sige, at vi har en række med produkter:

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

Lad os sige, at denne række er placeret i komponenten Products. Lad os gemme disse produkter i komponentens tilstand:

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

Lad os nu gennemgå produkterne i en løkke og udskrive dem i et eller andet layout:

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

Som du kan se, er indholdet af vores map-løkke ret komplekst, især hvis produktlayoutet vokser sig større senere. Sådan en kompleksitet gør det sværere at læse, forstå og vedligeholde koden.

Det ville være bedre at flytte koden, der står for visningen af produktet, til en separat komponent. Lad os kalde den Product. Her er koden til vores komponent:

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

Lad os nu inde i komponenten Products i map-løkken bruge underkomponenterne 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>;
}

Som du kan se, er løkkekoden nu blevet forenklet og er blevet mere forståelig. Derudover står en separat komponent nu for visningen af produktet, hvor vi kan lave og derefter redigere produktlayoutet.

Teknisk set har vi, at den overordnede komponent har en tilstand med data, og de underordnede komponenter modtager disse data i form af props og viser dem på den måde, vi har brug for.

I komponenttilstanden Users er følgende række givet:

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

Gennemgå denne række med en løkke og vis alle brugere på skærmen. Opret en separat komponent User til visning af brugeren.