Passando estados para componentes filhos no React

Suponha que tenhamos um array de produtos:

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

Suponha que este array esteja localizado no componente Products. Vamos armazenar esses produtos no estado do componente:

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

Agora vamos iterar pelos produtos com um loop e exibi-los em alguma marcação:

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

Como você pode ver, o conteúdo do nosso loop map é bastante complexo, especialmente se a marcação do produto crescer no futuro. Essa complexidade dificulta a leitura, compreensão e manutenção do código.

Seria melhor extrair o código responsável pela exibição do produto em um componente separado. Vamos chamá-lo de Product. Aqui está o código do nosso componente:

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

Agora, dentro do componente Products, no loop map, vamos usar componentes filhos 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 você pode ver, o código do loop agora foi simplificado e tornou-se mais fácil de entender. Além disso, agora a exibição do produto é responsabilidade de um componente separado, no qual podemos criar e depois editar a marcação dos produtos.

Tecnicamente, temos que o componente pai possui um estado com os dados, e os componentes filhos recebem esses dados na forma de props e os exibem da maneira que desejamos.

No estado do componente Users é dado o seguinte 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},
];

Itere por este array com um loop e exiba todos os usuários na tela. Crie um componente separado User para exibir cada usuário.