Overføring av tilstander til underkomponenter i React

La oss si at vi har en matrise med produkter:

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

La oss si at denne matrisen er plassert i komponenten Products. La oss skrive disse produktene til tilstanden til komponenten:

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

La oss nå gå gjennom produktene med en løkke og vise dem i en eller annen markup:

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 ser, er innholdet i vår map-løkke ganske komplekst, spesielt hvis markupen for produktet vokser i fremtiden. Slik kompleksitet vanskeliggjør lesing, forståelse og vedlikehold av koden.

Det ville være bedre å flytte koden som viser produktet til en egen komponent. La oss kalle den Product. Her er koden for vår komponent:

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

La oss nå inne i komponenten Products i map-løkken bruke underkomponenter 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 ser, har koden for løkken blitt forenklet og blitt mer forståelig. I tillegg er det nå en egen komponent som er ansvarlig for visning av produktet, der vi kan lage og deretter redigere markupen for produktene.

Teknisk sett har vi at foreldrekomponenten har en tilstand med data, mens underkomponentene mottar disse data som props og viser dem på den måten vi ønsker.

I tilstanden til komponenten Users er følgende matrise gitt:

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

Gå gjennom denne matrisen med en løkke og vis alle brukerne på skjermen. Opprett en egen komponent User for visning av brukeren.