Qué son los props en React y cómo entenderlos con un ejemplo de Material UI Button

Gabriel Jiménez | Hace 5 meses

Los props son propiedades que reciben los componentes para modificar su apariencia o comportamiento. Se parecen mucho a los parámetros de una función en cualquier lenguaje de programación: el componente recibe datos desde afuera y con base en ellos, ejecutar una tarea específica. Para entenderlos mejor, veamos la figura 1.

Figura 1. Analogía de los props. Para entender mejor los props, pensemos en una televisión y su control remoto. Cada botón del control representa un prop: al presionarlo, ejecuta una tarea específica en la televisión.

Ejemplo práctico: Material UI Button

Saber diseñar correctamente los props nos permitirá escalar y mantener nuestros componentes de manera más sencilla. Y qué mejor que verlo con un ejemplo de una de las librerías más populares en el mundillo de React: Material UI.

El botón es uno de los componentes más utilizados e importantes en cualquier aplicación. La mayoría de las veces lo empleamos como una llamada a la acción (call to action), por lo que su diseño y estructura son clave.

Seguramente en más de una ocasión te ha tocado crear un componente botón desde cero, y terminaste con varios componentes como:

ButtonPrimary

ButtonSecondary

ButtonLink

O peor aún: un único componente con props mal estructurados — nombres poco claros, demasiados props, o incluso props con más de una responsabilidad.

Por ejemplo, un caso extremo podría verse así:

import React from "react";

const Button = ({
  typeButton,       // poco claro: ¿se refiere a variant, estilo o comportamiento?
  colorcito,        // mal nombre, no estándar
  tamano,           // mezcla idiomas (español/inglés)
  isDisable,        // mala convención de nombres
  makeMagicStuff,   // nombre poco claro
  alertMessage,     // responsabilidad extra (mostrar alertas)
  withBorder,       // otro boolean que podría ser parte de un style o variant
  onClick,          // evento principal (mezclado con lógica extra)
  ...rest
}) => {
  const handleClick = (e) => {
    if (onClick) onClick(e);

    if (makeMagicStuff) {
      console.log("✨ Haciendo cosas mágicas...");
    }

    if (alertMessage) {
      alert(alertMessage);
    }
  };

  const styles = {
    backgroundColor: colorcito || "gray",
    fontSize: tamano === "grande" ? "20px" : "14px",
    border: withBorder ? "2px solid black" : "none",
    opacity: isDisable ? 0.5 : 1,
  };

  return (
    <button
      type={typeButton || "button"}
      style={styles}
      disabled={isDisable}
      onClick={handleClick}
      {...rest}
    >
      {rest.label || "Botón sin nombre"}
    </button>
  );
};

export default Button;

La mente es libre y a muchos nos ha pasado hacer algo así. Pero tranquilo, si te identificaste, es totalmente normal: son errores comunes que forman parte del aprendizaje y que, al reconocerlos, nos ayudan a ser mejores cada día.

Veamos como Material UI resuelve el problema de los props en su componente Button.

Usando el prop variant para cambiar el estilo

Uno de los usos más comunes de un botón es poder cambiar su estilo visual: que aparezca con fondo sólido, con borde o solo como texto, veamos la figura 2.

Figura 2. ¿Cómo cambiar el estilo de un botón en Material UI? Se utiliza el prop variant con las opciones contained, outlined y text.

Usando el prop color para personalizar el botónOtra de las personalizaciones más comunes en los botones es el color. En Material UI, el prop color nos permite elegir entre varias opciones predefinidas que mantienen consistencia y claridad en todos sus componentes, veamos un ejemplo en la figura 3.

Figura 3. ¿Cómo personalizar el color de un botón usando Material UI? Se utiliza el prop color con las opciones primary, secondary, success, error, info y warning

Usando el prop startIcon y endIcon para agregar icono y label

Para agregar un ícono a un botón solemos usar un prop booleano que indique si debe mostrarse o no. El problema de hacer esto, es que limita la escalabilidad de nuestros componentes: ¿qué pasa si necesitamos un ícono específico o queremos variar su posición?En lugar de complicarnos con listas de opciones o condiciones, Material UI resuelve este problema de manera elegante con los props startIcon y endIcon, ver figura 4.

Figura 4. ¿Cómo agregar un icono al inicio y final de un botón? Se usan los props startIcon y endIcon para añadir un ícono antes o después del texto del botón. El ícono es un componente, lo que hace esta solución mucho más escalable.

¿Por qué los props son importantes en React?

La importancia de definir buenos props es que permite que nuestros componentes sean fáciles de mantener, reutilizar y probar, tanto para quien los desarrolla como para quien los consume.

Como vimos en los ejemplos del componente Button de Material UI, sus props son claros respecto a la tarea que realizan, evitando confusiones sobre su comportamiento.

Si quieres aprender más sobre props, revisa la publicación: React props: buenas prácticas para código más limpio y escalable

NOTA: Si tienes dudas sobre el nombramiento de tus props o simplemente, necesitas inspiración, un buen punto de partida es revisar el API de los componentes de Material UI, ya que siguen convenciones consistentes y bien pensadas.

Conclusiones

Los props son las propiedades que pasamos a nuestros componentes para modificar su apariencia o comportamiento. Definirlos correctamente es clave para lograr componentes reutilizables, fáciles de mantener y de probar.

Para lograrlo:

Usa nombres claros y descriptivos

Define una lista de opciones en lugar de boleamos

Evita que un mismo prop tenga más de una responsabilidad

Si ya dominas estos conceptos de React, te invito a aprender sobre Testing en React. En mi hub Testing en React encontrarás todo lo necesario.

Hub de Testing en React

Ver contenido