Pasar estados a componentes hijos en React

Supongamos que tenemos un array con productos:

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

Supongamos que este array se encuentra en el componente Products. Escribamos estos productos en el estado del componente:

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

Ahora recorramos los productos con un bucle y mostrémoslos en algún 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>;
}

Como puedes ver, el contenido de nuestro bucle map es bastante complejo, especialmente si el markup del producto crece en el futuro. Tal complejidad dificulta la lectura, comprensión y mantenimiento del código.

Será mejor extraer el código responsable de mostrar el producto en un componente separado. Llamémoslo Product. Aquí está el código de nuestro componente:

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

Ahora dentro del componente Products en el bucle map usemos componentes hijos 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>;
}

Como puedes ver, ahora el código del bucle se simplificó y se volvió más comprensible. Además, ahora la visualización del producto la maneja un componente separado, en el cual podemos crear y luego editar el markup de los productos.

Técnicamente, tenemos que el componente padre tiene un estado con datos, y los componentes hijos reciben estos datos en forma de props y los muestran de la manera que necesitamos.

En el estado del componente Users se da el siguiente array:

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

Recorre este array con un bucle y muestra todos los usuarios en la pantalla. Crea para la visualización del usuario un componente separado User.