Överföring av tillstånd till underordnade komponenter i React

Låt oss säga att vi har en array med produkter:

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

Låt oss säga att denna array finns i komponenten Products. Låt oss sätta dessa produkter i komponentens tillstånd:

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

Låt oss nu iterera över produkterna med en loop och visa dem i någon form av markup:

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

Som du kan se är innehållet i vår map-loop ganska komplext, speciellt om produktens markup kommer att växa i framtiden. Sådan komplexitet försvårar läsbarhet, förståelse och underhåll av koden.

Det vore bättre att flytta koden som ansvarar för visningen av produkten till en separat komponent. Låt oss kalla den Product. Här är koden för vår komponent:

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

Låt oss nu inuti komponenten Products i map-loopen använda underordnade komponenter 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 har loopkoden förenklats och blivit mer förståelig. Dessutom ansvarar nu en separat komponent för visningen av produkten, där vi kan skapa och sedan redigera produktens markup.

Tekniskt sett har vi fått så att den överordnade komponenten har ett tillstånd med data, medan de underordnade komponenterna tar emot dessa data som props och visar dem på det sätt vi vill.

Följande array finns i tillståndet för komponenten 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},
];

Iterera över denna array med en loop och visa alla användare på skärmen. Skapa en separat komponent User för att visa användaren.