Las props son las entradas de un componente de React. Un padre las pasa como atributos en JSX, <UserCard name="Ada" online={true} />, y el hijo las recibe como un solo objeto, que normalmente desestructuras en los parámetros de la función. Las props permiten que un componente muestre datos distintos cada vez que lo usas.
El mismo UserCard renderiza tres personas distintas. Fíjate en la última: un atributo sin valor, online, significa online={true}. Agrega una cuarta tarjeta con tu propio nombre y rol.
Pasar y leer props
Pasa una cadena entre comillas y cualquier otro valor entre llaves: números, booleanos, arrays, objetos, funciones, incluso JSX.
<Product
title="Desk lamp"
price={39.5}
inStock={false}
tags={['light', 'office']}
seller={{ name: 'Lumen', rating: 4.8 }}
/>
React reúne todos los atributos en un objeto y lo pasa como primer argumento del componente. Puedes leerlo como props, o desempaquetar los campos que necesitas directamente en la lista de parámetros:
function Product(props) {
return <h3>{props.title}</h3>;
}
function Product({ title, price, seller }) {
return <h3>{title}, ${price} from {seller.name}</h3>;
}
Ambas versiones reciben el mismo objeto. La desestructuración es el estilo habitual porque así la firma de la función enumera exactamente qué props usa el componente.
Valores por defecto
Dale un valor por defecto a una prop con el valor por defecto de la desestructuración de JavaScript, = value. Se aplica cuando el padre omite la prop o pasa undefined. No se aplica a null, 0, false ni '', que son valores reales.
Los tres primeros botones usan sus valores por defecto donde una prop falta o es undefined. El último pasa null, así que size realmente es null, y la búsqueda no encuentra ningún padding. Cambia size={null} por size="small" para arreglarlo.
El código antiguo define los valores por defecto con una propiedad estática, Button.defaultProps = { size: 'medium' }. React 19 eliminó defaultProps para los componentes de función: JSX lo ignora en una función, sin advertencia. Sigue funcionando en los componentes de clase. Usa valores por defecto en la desestructuración.
Pasar funciones como props
Los datos fluyen hacia abajo: un padre pasa props a sus hijos, nunca al revés. Cuando un hijo necesita avisarle al padre que algo pasó, el padre le pasa una función y el hijo la llama. Por convención, estas props se llaman onSomething.
Rating no guarda nada. Muestra el value que recibe y comunica los clics mediante onRate. El estado vive en App, que lo vuelve a pasar hacia abajo. Pasa onRate={setRating} directamente en lugar de handleRate y sigue funcionando: un setter también es una función. Mover el estado a un padre común de esta forma se llama elevar el estado.
Propagar props
Cuando ya tienes un objeto cuyas claves coinciden con las props de un componente, propágalo con {...object} en lugar de escribir cada atributo. La sintaxis rest hace lo contrario en la lista de parámetros: toma algunas props por nombre, reúne todo lo demás y lo reenvía.
El segundo avatar propaga person y luego define color: cuando la misma prop aparece dos veces, gana la última, así que pon las sobrescrituras después de la propagación. TextField se queda con label y pasa type, placeholder y maxLength directamente al <input>. Usa la propagación para envoltorios como este; en otros casos, enumerar las props explícitamente hace más fácil ver qué recibe un componente.
Las props son de solo lectura
Un componente nunca debe cambiar sus propias props. Pertenecen al padre, y el mismo objeto puede estar compartido. Trátalas como argumentos de función que no puedes reasignar:
function Counter({ count }) {
count = count + 1; // wrong: changes a local copy, the parent never sees it
return <p>{count}</p>;
}
function Profile(props) {
props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
return <p>{props.name}</p>;
}
Las props sí cambian con el tiempo. Cuando el padre vuelve a renderizar con valores nuevos, el hijo recibe un objeto de props nuevo y renderiza con él:
Temperature nunca cambia celsius. Calcula fahrenheit a partir de él en cada renderizado. Arrastra el control deslizante y el estado del padre cambia, así que el hijo recibe una prop nueva. Si un hijo necesita un valor que pueda cambiar por sí mismo, ese valor es estado, no una prop.
Props vs estado
Las props y el estado son valores normales de JavaScript que afectan lo que renderiza un componente, y un cambio en cualquiera de los dos vuelve a renderizar el componente. La diferencia es quién es dueño del valor.
| Props | Estado | |
|---|---|---|
| Viene de | El padre, como atributos JSX | El propio componente, desde useState o useReducer |
| ¿El componente puede cambiarlo? | No, es de solo lectura | Sí, mediante su setter |
| Uso típico | Configurar un componente: una etiqueta, un tamaño, los datos a mostrar | Recordar algo que cambia: el texto de un input, un menú abierto |
El mismo valor suele ser ambas cosas. En el ejemplo de temperatura de arriba, celsius es estado en App y prop en Temperature. El dueño lo guarda como estado y lo pasa hacia abajo como prop, junto con una función para cambiarlo cuando un hijo la necesita.
Una prop puede contener cualquier valor, incluidos JSX y componentes. Pasar un elemento como icon={<StarIcon />} permite que un padre llene un hueco en un hijo, la misma idea que children pero con el nombre que elijas.
La prop children
Lo que pongas entre las etiquetas de apertura y cierre de un componente llega como una prop llamada children. Así se construyen envoltorios como tarjetas, paneles y layouts que no conocen su contenido de antemano:
La página de children cubre cómo pasar varios huecos y trabajar con children de forma segura.
Las keys no son props
key parece un atributo, pero React se lo reserva para emparejar los elementos de una lista entre renderizados. El componente nunca lo recibe:
La consola muestra props.key como undefined y props.id con el valor real. Cuando un hijo necesita el identificador, pásalo una segunda vez con otro nombre, como hace aquí id. Un build de desarrollo también advierte cuando lees props.key; la vista previa funciona como un build de producción, así que solo ves el undefined.
Preguntas frecuentes
¿Qué son las props en React?
Las props (abreviatura de properties) son los argumentos de un componente. Un padre las pasa como atributos JSX, <Avatar size={48} />, y el hijo las recibe como un solo objeto, normalmente desestructurado: function Avatar({ size }).
¿Cómo defino un valor por defecto para una prop?
Usa un valor por defecto en la desestructuración: function Button({ size = 'medium' }). El valor por defecto se aplica cuando la prop falta o es undefined. React 19 eliminó defaultProps para los componentes de función; los componentes de clase todavía lo admiten.
¿Un componente hijo puede cambiar sus props?
No. Las props son de solo lectura. Para cambiar lo que muestra un hijo, el padre pasa props nuevas; para que el hijo pueda pedir un cambio, el padre le pasa una función como onChange y el hijo la llama.
¿Cuál es la diferencia entre props y estado?
Las props vienen del padre y el hijo no puede cambiarlas. El estado pertenece al propio componente y cambia mediante su setter. Un valor suele ser estado en un padre y prop en sus hijos.
¿Por qué props.key es undefined?
React usa key (como ref en versiones antiguas) para seguir los elementos de una lista, y no se pasa al componente. Si el hijo necesita el valor, pásalo otra vez con otro nombre, por ejemplo <Row key={id} id={id} />.
