Props: dados entrando no componente

Props são a entrada de um componente. O componente pai passa valores; o filho usa esses valores para renderizar variações da mesma estrutura.

function ProductCard({ name, price, featured = false }) {
  return (
    <article>
      {featured && <strong>Destaque</strong>}
      <h2>{name}</h2>
      <p>R$ {price.toFixed(2)}</p>
    </article>
  );
}

export default function App() {
  return (
    <main>
      <ProductCard name="Café Catuaí" price={34.9} featured />
      <ProductCard name="Café Bourbon" price={39.5} />
    </main>
  );
}

A desestruturação ({ name, price }) só deixa o código mais direto. Props são somente leitura: o filho não deveria alterar o valor recebido para "avisar" o pai. Quando precisar comunicar uma ação, o pai pode passar uma função como prop.

function BuyButton({ onBuy }) {
  return <button onClick={onBuy}>Comprar</button>;
}

Mini missão: carta colecionável

Crie um componente PowerCard que receba name, level, rarity e onSelect. Renderize três cartas diferentes e mostre no componente pai qual carta foi selecionada. A brincadeira é simples, mas força a separar dado, visual e evento.

• Props: levam dados do componente pai para o filho.
• Valor padrão: cobre casos em que uma prop opcional não foi enviada.
• Funções também podem ser props, permitindo que o filho sinalize eventos ao pai.

Dica: se você sente vontade de modificar uma prop, provavelmente esse dado precisa ser estado em algum componente acima.

No próximo nó, vamos usar uma prop especial (children) para compor componentes sem criar uma API cheia de props específicas.