¿Qué son props en React y cómo se usan?

Los props son la abreviatura de "propiedades".

Son un mecanismo para pasar datos de un componente padre a un componente hijo. 👨‍👧‍👦

También se utilizan para personalizar un componente, para que se adapte a diferentes UIs.

En esta lección aprenderás:

1. Cómo pasar props a un componente
2. Cómo leer los props que recibe un componente
3. Cómo especificar valores por default y
4. Cómo usar props como variantes

Los props son inmutables

En React, los props son inmutables para los hijos, lo que significa que no pueden cambiarlos, solo recibirlos y mostrarlos o tomar desiciones a partir de ellos.

Los props solo pueden cambiar desde el padre que los origina. A esto se le llama “One way data binding” o datos enlazados en una sola dirección. Esto significa que los props pasan de padres a hijos de forma inmutable.

Para pasar props a un componente, se utiliza la sintaxis de atributos en JSX.

Por ejemplo, pasemos un nombre a este componente Message:

<Message name="blissmo" />

En el componente hijo, podemos acceder a esta propiedad utilizando el parámetro props, que será un objeto en el que podemos utilizar la sintaxis de puntos.

Por ejemplo, si queremos mostrar el nombre en el componente hijo, podemos hacer lo siguiente:

function Message(props) {
  return <p>Hola {props.name}</p>;
}

Props por default

Una manera más simple y explicita de leer los props de un componente, es con la sintaxis de ES6 llamada “destructuring”.

Esta estrategia nos permite visualiza con claridad los props que un componente espera recibir.

function Message({name, email="fixtergeek@gmail.com"}) {
  return <p>Hola {props.name}</p>;
}

De esta forma, al leer un componente, identificamos rápido los props que este necesita. Además también podemos darle valores por default con este método, permitiendo que sean opcionales.

👀 También puedes pasar JSX y otros componentes como props:

<Message name={<Header>{blissmoName}</Header>} />

Props como variantes

Un uso común de los props, es la toma de decisiones en nuestro UI.

Por ejemplo, podemos crear un componente botón, que tenga dos, tres o hasta más formas de mostrarse, con fondo, con borde, o como un link.

A estas diferencias se les conoce como “variants” y un solo prop puede producir diferentes resultados:

export default function Button({ children, variant = "default" }) {
  const style =
    variant === "link"
      ? { border: none, textDecoration: "underline" }
      : variant === "outline"
      ? { border: "2px solid", background: "transparent" }
      : { border: "1px solid", background: "indigo" };

  return <button style={style}>{children}</button>;
}

Aquí usamos CSS inline, para cambiar el botón según el valor del prop variant. De esta forma podemos reutilizar un componente con fines distintos, lo que convierte a los props en una forma de configuración.

Los props son parte del núcleo de React

Y es buena idea que los entiendas bien, y claro, que uses “destructuring” cada que puedas. 😉

Enlaces relacionados

Destructuring