Nas lições anteriores, aprendemos como construir pequenos componentes em React assim:

function Greeting() {
  const developerName = "Jessica";
  return <h1>Hi {developerName}!</h1>;
}

Podemos escolher aninhar este componente dentro de outro componente pai ou do componente raiz assim:

function App() {
  return <Greeting />;
}

function Greeting() {
  const developerName = "Jessica";
  return <h1>Hi {developerName}!</h1>;
}

Embora este código funcione bem e exiba o resultado de Hi Jessica! na tela, ele não é um componente tão flexível. E se quisermos exibir um nome diferente como Naomi, Tom e Oliver? É aqui que entram as props do React. Props, que é a abreviação de properties, é a forma dos componentes pai passarem dados para o componente filho. Props podem ser de qualquer tipo: strings, números, booleanos, objetos ou arrays. Vamos atualizar nosso exemplo de antes para agora aceitar uma prop name:

function App() {
  return <Greeting name="Jessica" />;
}

export default App;

function Greeting(props) {
  console.log(props);
  return <h1>Hi {props.name}!</h1>;
}

Para o componente filho chamado Greeting estamos agora usando props.name em vez de codificar o nome "Jessica" diretamente. Também estamos registrando props no console que está aparecendo como um objeto. Então, dentro do componente pai App, estamos passando o valor para a prop name para que ele possa ser passado para o filho. O resultado será o mesmo na tela como antes, mas agora criamos um componente mais flexível. Agora temos a capacidade de reutilizar o componente filho várias vezes e passar nomes diferentes a cada vez:

function App() {
  return (
    <>
      <Greeting name="Naomi" />
      <Greeting name="Tom" />
      <Greeting name="Jessica" />
      <Greeting name="Oliver" />
    </>
  );
}

Você também pode optar por usar destructuring de objeto nas props para tornar isso mais legível. Aqui está como você poderia reescrever o componente Greeting:

function Greeting({ name }) {
  return <h1>Hi {name}!</h1>;
}

Este código alcança o mesmo resultado mas deixa mais claro quais props o componente espera receber. React também fornece uma prop especial chamada children. Qualquer JSX que você colocar entre as tags de abertura e fechamento de um componente é passado para o componente como children. Por exemplo:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Hello</h2>
    </Card>
  );
}

Neste caso, o JSX dentro de <Card>...</Card> se torna a prop children. A saída renderizada no DOM será:

<div class="card">
  <h2>Hello</h2>
</div>

Esse padrão é frequentemente usado para composição de componentes, onde um componente envolve outros elementos de UI. Às vezes, você pode ter muitas propriedades que precisa passar como props. Em vez de passá-los um por um, você pode usar o operador spread (...), depois de convertê-los em um objeto. Aqui está um exemplo de um novo componente filho chamado DeveloperCard:

function DeveloperCard({ name, age, country }) {
  return (
    <div className="developer-card">
      <h1>Developer: {name}</h1>
      <p>Age: {age}</p>
      <p>Country: {country}</p>
    </div>
  );
}

Este componente DeveloperCard aceita três props: name, age e country. No componente pai App, podemos usar a sintaxe spread para passar todas as propriedades de um objeto como props individuais para o componente filho:

function App() {
  const developerObj = {
    name: "Alice",
    age: 30,
    country: "USA",
  };

  return (
    <div className="App">
      <DeveloperCard {...developerObj} />
    </div>
  );
}

Isso é particularmente útil ao trabalhar com arrays de objetos e passar múltiplos conjuntos de propriedades para componentes filhos. Por exemplo, você pode ter uma lista de desenvolvedores onde cada objeto no array tem a mesma estrutura mas representa uma pessoa diferente. Você aprenderá mais sobre como renderizar listas em arrays em lições futuras. Usar props em React torna seus componentes mais flexíveis e reutilizáveis, permitindo que você construa UIs mais complexas. No entanto, é importante notar que props são imutáveis, ou seja, não podem ser alteradas depois de passadas para um componente. Se você precisa lidar com a entrada do usuário e modificar dados, você deve usar state em vez disso. You'll learn more about managing state in future lessons.