Props: pasar datos a un componente — Componentes, JSX y estado

Props

Los componentes reciben datos a través de props (propiedades), como los atributos de una etiqueta. Las props llegan como un objeto, el primer parámetro de la función:

function Saludo(props) {
  return <h1>Hola, {props.nombre}</h1>;
}

Lo habitual es desestructurar las props directamente:

function Saludo({ nombre }) {
  return <h1>Hola, {nombre}</h1>;
}

Y se usan pasándolas como atributos:

<Saludo nombre="Ana" />
<Saludo nombre="Luis" />

Las props son de solo lectura: un componente no debe modificar sus props. Sirven para configurarlo desde fuera y reutilizarlo con distintos datos.