Props de Componentes em React

Na lição anterior, exibimos vários produtos instanciados:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

Até agora, cada chamada da tag do produto exibe a mesma coisa na tela. Vamos agora fazer com que cada produto seja único.

Suponha, por exemplo, que cada produto deve ter um nome e um preço. Vamos fazer com que cada chamada da tag do produto exiba um produto com seu próprio nome e preço, formatados na estrutura de marcação que desejamos.

Para isso, precisamos realizar algumas etapas.

Primeiro, ao chamar a tag do produto, vamos escrever dois atributos nessa tag: o atributo name com o nome do produto e o atributo cost com o preço, assim:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Os nomes e valores desses atributos serão passados como um objeto para o primeiro parâmetro da função construtora do nosso componente Product:

function Product(props) {
	console.log(props); // objeto com chaves name e cost
	
	return <p>
		produto
	</p>;
}

O nome do parâmetro pode ser qualquer um, mas no React é comum chamá-lo de props. Na verdade, isso não é apenas o nome do parâmetro, mas um conceito importante no React.

A essência desse conceito é a seguinte: ao chamar a tag de um componente, podemos escrever atributos com dados nessa tag. Esses dados serão passados para as props do componente. Então, o componente pode usar esses dados, por exemplo, para criar a estrutura de marcação desejada.

Vamos fazer isso:

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

É mais conveniente e mais comum não usar o objeto props diretamente, mas sim fazer a desestruturação das props diretamente nos parâmetros da função:

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

Crie um componente Employee que exiba os dados de um funcionário na tela. Deixe esses dados serem sobrenome, nome, patronímico e salário. Formate esses dados na estrutura de marcação que você desejar. Exiba no componente App três funcionários com dados diferentes.