No React, props (abreviação de propriedades) são um mecanismo poderoso para personalizar e passar dados de um componente pai para um componente filho. Esse recurso permite criar componentes reutilizáveis e flexíveis dentro do aplicativo.

Passando Props

Imagine uma loja online em desenvolvimento.

Neste cenário, há um componente principal chamado App, e deseja-se exibir informações de produtos utilizando um componente Product. O nome e o preço do produto podem ser passados como props de App para Product.

Veja como isso é feito na prática:

// Parent Component (`App`)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

No componente App, incluímos o componente Product e passamos para ele as props: name com o valor "Green iguana" e price com o valor 579.

Recebendo e Utilizando Props

Agora, veja o componente Product, que recebe essas props:

// Child Component (`Product`)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

No componente Product, definimos para aceitar um único argumento chamado props. Dentro do componente, podemos acessar os valores dessas props utilizando a notação de ponto (.) seguida do nome da propriedade (por exemplo, props.name e props.price).

Uso Prático

Com essa abordagem, criamos um componente Product que pode ser reutilizado com diferentes informações de produto várias vezes. Podemos facilmente personalizar o conteúdo de texto de cada componente Product fornecendo props diferentes.

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

Agora temos flexibilidade para exibir diversos detalhes de produtos utilizando o mesmo componente Product.

Código Completo do Aplicativo: