Props de Componentes em React

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

jsxfunction 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:

jsxfunction 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:

jsxfunction 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:

jsxfunction 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:

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