Tilojen välittäminen lapsikomponentteihin Reactissa

Oletetaan, että meillä on tuotetaulukko:

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

Oletetaan, että tämä taulukko sijaitsee komponentissa Products. Tallennetaan nämä tuotteet komponentin tilaan:

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

Kierretään nyt tuotteet silmukalla ja tulostetaan ne johonkin rakenteeseen:

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

Kuten näette, map-silmukan sisältö on melko monimutkainen, erityisesti jos tuotteen rakenne kasvaa tulevaisuudessa. Tällainen monimutkaisuus vaikeuttaa koodin lukemista, ymmärtämistä ja ylläpitoa.

Olisi parempi siirtää tuotteen näyttämisestä vastaava koodi omaan komponenttiin. Nimetään se Product. Tässä on komponenttimme koodi:

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

Käytetään nyt komponentin Products sisällä map-silmukassa lapsikomponentteja 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>;
}

Kuten näette, silmukan koodi on nyt yksinkertaistunut ja siitä on tullut helpommin ymmärrettävä. Lisäksi tuotteen näyttämisestä vastaa nyt erillinen komponentti, jossa voimme tehdä ja myöhemmin muokata tuotteiden rakennetta.

Teknisesti ottaen käy niin, että vanhempakomponentilla on tila, jossa on dataa, ja lapsikomponentit saavat nämä tiedot propseina ja näyttävät ne haluamallamme tavalla.

Komponentin Users tilassa on seuraava taulukko:

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

Kierrä tämä taulukko silmukalla ja näytä kaikki käyttäjät näytöllä. Luo käyttäjän näyttämistä varten erillinen komponentti User.