Props: passar dados a um componente — Componentes, JSX e estado

Props

Os componentes recebem dados por meio das props (propriedades), como os atributos de uma tag. As props chegam como um objeto, o primeiro parâmetro da função:

function Saudacao(props) {
  return <h1>Olá, {props.nome}</h1>;
}

O habitual é desestruturar as props diretamente:

function Saudacao({ nome }) {
  return <h1>Olá, {nome}</h1>;
}

E elas são usadas passando-as como atributos:

<Saudacao nome="Ana" />
<Saudacao nome="Luís" />

As props são somente leitura: um componente não deve modificar suas props. Servem para configurá-lo de fora e reutilizá-lo com dados diferentes.