Props: datos que recibe un componente

Las props son los datos que un componente recibe de quien lo utiliza. Son como los argumentos de una función. Permiten reutilizar el mismo componente con valores diferentes.

1interface Props {
2  color: string;
3  size: number;
4}
5
6function MiComponente({ color, size }: Props) {
7  return (
8    <div>
9      Soy un componente de color {color} de tamaño {size}
10    </div>
11  );
12}
13
14export default function Ejem_04() {
15  return (
16    <>
17      <MiComponente color="red" size={4} />
18      <MiComponente color="blue" size={8} />
19    </>
20  );
21}

interface Props describe las propiedades esperadas. TypeScript comprueba que color sea texto y size sea un número. La desestructuración { color, size } extrae las propiedades del objeto recibido.

color="red" pasa una cadena. size={4} pasa una expresión numérica; size="4" pasaría una cadena y no cumpliría esta interfaz.

En este ejemplo el color y el tamaño se muestran como texto. Recibir una prop llamada color no aplica estilos automáticamente: debes decidir cómo utilizarla.

Props de solo lectura #

El componente hijo no debe cambiar las props que recibe. Si el dato necesita cambiar, el padre lo actualiza y pasa el nuevo valor. Más adelante utilizaremos funciones recibidas por props para comunicar acciones hacia el padre.

Una prop opcional se declara con ? y puede tener un valor por defecto:

1interface EtiquetaProps {
2  texto?: string;
3}
4
5function Etiqueta({ texto = 'Sin texto' }: EtiquetaProps) {
6  return <span>{texto}</span>;
7}

El valor por defecto se utiliza si la prop se omite o vale undefined. No sustituye otros valores, como una cadena vacía.

Prueba tú #

Crea una tarjeta que reciba nombre y edad. Muestra dos tarjetas con personas distintas sin duplicar la definición del componente.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.