Tutorial React: Props y manejo de datos entre componentes

Qué son las props en React

En React, las "props" (abreviatura de "properties") son un mecanismo utilizado para pasar datos y eventos desde un componente padre a un componente hijo. Permiten a los componentes comunicarse entre sí y compartir información, manteniendo la naturaleza declarativa de React. Las props son inmutables, lo que significa que un componente no puede modificar sus propias props.

Las props se definen cuando se instancia un componente, y se pasan como atributos HTML. Dentro del componente hijo, se accede a las props a través del objeto props que se recibe como argumento de la función del componente.

Ejemplo básico de uso de props:

// App.jsx
import Titulo from './components/Title/Title'

// Componente padre
const App = () => (
  Titulo({ titulo: 'Hello World' })
)

export default App

// Title.jsx
// Componente hijo
export default function Titulo({ titulo }) {
    return (
        <h1>{titulo}</h1>
    )
}

En este ejemplo, el componente App pasa una prop llamada nombre al componente Titulo. El componente Titulo recibe esta prop y la utiliza para renderizar un título personalizado.

Las props también pueden ser utilizadas para pasar funciones como callbacks, lo que permite manejar eventos en el componente hijo y notificar al componente padre de ciertos cambios o acciones.

Ejemplo de paso de función como prop:

// Boton.jsx
// Componente hijo
export const Boton = ({ onClick }) => (
  <button onClick={onClick}>Clica aquí</button>
)

// App.jsx
// Componente padre
export default function App() {
  const manejarClick = () => {
    console.log("Botón clicado!");
  };

  return (
    <Boton onClick={manejarClick} />
  )
}

En este ejemplo, el componente App define una función manejarClick que se pasa al componente Boton como una prop llamada onClick. El componente Boton utiliza esta prop para manejar el evento de clic.

Es importante tener en cuenta que las props son de solo lectura, lo que significa que un componente no debe intentar modificarlas. Si necesitas cambiar el estado de un componente en respuesta a una prop, deberías utilizar el estado local del componente o gestionar el estado en un componente superior y pasar las props actualizadas a los componentes hijos.

Uso y renderizado de props como parámetro

Para utilizar y renderizar props como parámetros en React, es esencial comprender cómo las props se pasan a los componentes y cómo se pueden utilizar dentro de ellos. Las props se pasan desde un componente padre a un componente hijo y se acceden desde el objeto props en el componente hijo.

Al definir un componente, puedes desestructurar las props directamente en los parámetros de la función del componente. Esto proporciona una forma más limpia y concisa de acceder a las props.

Ejemplo de desestructuración de props:

// Saludo.jsx
// Componente hijo
export const Saludo = ({ nombre }) => (
    <h1>Hola, {nombre}!</h1>
)

// App.jsx
// Componente padre
export default function App() {
  return (
    <Boton onClick={manejarClick} />
  )
}

En este ejemplo, el componente Saludo recibe una prop llamada nombre y la desestructura directamente en los parámetros de la función, lo que permite acceder a ella sin necesidad de usar props.nombre.

Las props también se pueden utilizar para renderizar contenido condicionalmente dentro de los componentes. Esto se hace evaluando las props dentro del componente y renderizando diferentes elementos en función de su valor.

Ejemplo de renderizado condicional con props:

// Mensaje.jsx
export default function Mensaje({ tipo, texto }) {
    if (tipo === "error") {
        return <p style={{ color: 'red' }}>{texto}</p>;
    }
    return <p>{texto}</p>;
}

// App.jsx
import Mensaje from './components/Mensaje/Mensaje'

export default function App() {
  return (
    <>
      <Mensaje tipo="error" texto="Ha ocurrido un error" />
      <Mensaje tipo="info" texto="Todo está bien" />
    </>
  )
}

En este ejemplo, el componente Mensaje renderiza el texto en rojo si la prop tipo es "error" y en el estilo predeterminado para cualquier otro valor de tipo.

Además, es posible pasar objetos completos o arrays como props. Esto permite a los componentes manejar datos más complejos.

Ejemplo de paso de objetos y arrays como props:

// Lista.jsx
export default function Lista({ items }) {
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

// App.jsx
import Lista from './components/Lista/Lista';

export default function App() {
  const frutas = ["Manzana", "Banana", "Naranja"];
  return (
    <div>
      <Lista items={frutas} />
    </div>
  )
}

En este ejemplo, el componente Lista recibe un array de items y los renderiza como una lista de elementos <li>. La prop items se pasa desde el componente App.

Uso de múltiples props

En React, es común que un componente necesite recibir múltiples props para funcionar correctamente. Pasar múltiples props a un componente es sencillo y se realiza de manera similar a cómo se pasa una única prop. Cada prop se define como un atributo en el componente padre y se accede a ellas desde el componente hijo a través del objeto props.

Ejemplo de un componente que recibe múltiples props:

// Usuario.jsx
export default function Usuario({ nombre, edad, email }) {
    return (
        <div>
            <h1>Nombre: {nombre}</h1>
            <p>Edad: {edad}</p>
            <p>Email: {email}</p>
        </div>
    );
}

// App.jsx
import Usuario from './components/Usuario/Usuario';

export default function App() {
  return (
    <div>
      <Usuario nombre="Juan" edad={30} email="juan@example.com" />
    </div>
  )
}

En este ejemplo, el componente Usuario recibe tres props: nombre, edad y email. Cada una de estas props se utiliza para renderizar diferentes partes del componente.

Además, es importante tener en cuenta que las props pueden ser de cualquier tipo de dato, incluyendo objetos y arrays. Esto permite pasar datos complejos y estructurados a los componentes.

Ejemplo de paso de un objeto como prop:

// Direccion.jsx
export default function Direccion({ direccion }) {
    return (
        <div>
            <p>Calle: {direccion.calle}</p>
            <p>Ciudad: {direccion.ciudad}</p>
            <p>País: {direccion.pais}</p>
        </div>
    );
}

// App.jsx
import Direccion from './components/Direccion/Direccion';

export default function App() {
  const direccionUsuario = {
    calle: "Calle Falsa 123",
    ciudad: "Madrid",
    pais: "España"
  };
  return (
    <div>
      <Direccion direccion={direccionUsuario} />
    </div>
  )
}

En este ejemplo, el componente Direccion recibe una prop direccion que es un objeto. El componente utiliza las propiedades del objeto direccion para renderizar la información de la dirección.

Props por defecto

En React, es común que los componentes necesiten props con valores predeterminados para garantizar que funcionen correctamente, incluso si no se les pasa una prop específica. Esto es especialmente útil cuando se desarrollan componentes que pueden ser utilizados en diferentes contextos.

Para definir props por defecto en un componente, se utiliza la propiedad defaultProps. Esta propiedad permite especificar valores predeterminados para las props que no se proporcionan al componente. Si una prop no se pasa al componente, React utilizará el valor definido en defaultProps.

Ejemplo básico de uso de defaultProps:

// Saludo.jsx
export default function Saludo({ nombre }) {
    return <h1>Hola, {nombre}!</h1>;
}

Saludo.defaultProps = {
    nombre: 'Mundo'
};

// App.jsx
import Saludo from './components/Saludo/saludo'

export default function App() {
  return (
    <div>
      <Saludo />
      <Saludo nombre="Juan" />
    </div>
  )
}

En este ejemplo, el componente Saludo tiene una prop por defecto nombre con el valor "Mundo". Cuando el componente Saludo se renderiza sin la prop nombre, se utiliza el valor por defecto. Si se proporciona una prop nombre, como en el caso de "Juan", se utiliza el valor pasado.

También es posible definir props por defecto utilizando la sintaxis de desestructuración en la firma de la función del componente. Este enfoque es más conciso y se utiliza comúnmente en componentes funcionales.

Ejemplo de desestructuración con valores por defecto:

// Saludo.jsx
export default function Saludo({ nombre = "Mundo" }) {
    return <h1>Hola, {nombre}!</h1>;
}

// App.jsx
import Saludo from './components/Saludo/saludo'

export default function App() {
  return (
    <div>
      <Saludo />
      <Saludo nombre="Juan" />
    </div>
  )
}

En este ejemplo, el valor por defecto para la prop nombre se define directamente en los parámetros de la función del componente Saludo. Si no se pasa la prop nombre, se utiliza el valor "Mundo".

Para componentes basados en clases, también se puede definir defaultProps de la misma manera:

// Saludo.jsx
import { Component } from "react";

export default class Saludo extends Component {
    render() {
        return <h1>Hola, {this.props.nombre}!</h1>;
    }
}

Saludo.defaultProps = {
    nombre: 'Mundo'
};

// App.jsx
import { Component } from 'react';
import Saludo from './components/Saludo/saludo'

export default class App extends Component {
  render() {
    return (
      <div>
        <Saludo />
        <Saludo nombre="Juan" />
      </div>
    );
  }
}

En este ejemplo, el componente Saludo es una clase y tiene una prop por defecto nombre con el valor "Mundo". El comportamiento es el mismo que en los ejemplos anteriores.

Definir props por defecto es una práctica recomendable para mejorar la robustez y la reutilización de los componentes. Asegura que los componentes funcionen correctamente incluso cuando no se les pasan todas las props necesarias. Además, facilita la documentación y el uso de los componentes, ya que los desarrolladores pueden ver rápidamente cuáles son los valores predeterminados y ajustar solo las props que necesitan cambiar.

Propagación de props

En React, la propagación de props es una técnica que permite pasar todas las props de un componente padre a un componente hijo. Esto es especialmente útil cuando se trabaja con componentes que necesitan recibir un gran número de props o cuando se desea pasar todas las props de un componente a otro sin tener que especificarlas individualmente.

Para propagar todas las props de un componente padre a un componente hijo, se utiliza el operador de propagación (...). Este operador permite expandir un objeto en un lugar donde se esperan múltiples elementos, como en los atributos de un componente.

Ejemplo básico de propagación de props:

// Input.jsx
export default function Input(props) {
    return <input {...props} />;
}

// App.jsx
import Input from './components/Input/Input';

export default function App() {
  return (
    <div>
      <Input type="text" placeholder="Escribe algo" />
    </div>
  )
}

En este ejemplo, el componente Input recibe todas las props pasadas desde el componente App utilizando el operador de propagación {...props}. Esto permite que cualquier prop que se pase al componente Input desde el componente App sea aplicada directamente al elemento <input>.

Es posible combinar la propagación de props con otras props específicas que el componente necesite. Esto se logra especificando props adicionales junto con el operador de propagación.

Ejemplo de combinación de propagación de props con props específicas:

// Boton.jsx
export default function Boton({ texto, ...rest }) {
    return <button {...rest}>{texto}</button>;
}

// App.jsx
import Boton from './components/Boton/Boton';

export default function App() {
  return (
    <div>
      <Boton texto="Clica aquí" onClick={() => alert("Botón clicado!")} />
    </div>
  )
}

En este ejemplo, el componente Boton recibe una prop específica texto y luego propaga todas las demás props utilizando {...rest}. Esto permite que el componente Boton sea flexible en cuanto a las props que puede recibir y, al mismo tiempo, pueda tener props específicas que necesita para su funcionalidad.

La propagación de props también puede ser útil cuando se trabaja con componentes de orden superior (HOCs) o componentes de renderizado condicional, donde las props necesitan ser pasadas a componentes hijos sin saber de antemano qué props estarán disponibles.

Ejemplo de propagación de props en un componente de orden superior:

function withLogger(WrappedComponent) {
  return function LoggerComponent(props) {
    console.log("Props:", props);
    return <WrappedComponent {...props} />;
  };
}

function ComponenteEjemplo({ mensaje }) {
  return <p>{mensaje}</p>;
}

const ComponenteConLogger = withLogger(ComponenteEjemplo);

export default function App() {
  return (
    <div>
      <ComponenteConLogger mensaje="Hola, mundo!" />
    </div>
  );
}

En este ejemplo, el componente withLogger es un HOC que envuelve el componente ComponenteEjemplo y propaga todas las props utilizando {...props}. Esto permite que el HOC añada funcionalidad adicional (como el logging) sin interferir con las props que el componente envuelto necesita.

La propagación de props es una técnica poderosa en React que permite simplificar el paso de props entre componentes. Sin embargo, es importante usarla de manera juiciosa para mantener la claridad y la mantenibilidad del código.

Validación de props

En React, la validación de props es una práctica recomendada para asegurar que los componentes reciben los tipos de datos correctos. Esto ayuda a prevenir errores, facilita el mantenimiento del código y mejora la documentación de los componentes. La herramienta principal para la validación de props en React es la biblioteca prop-types.

Para utilizar prop-types, primero hay que instalar la biblioteca si no está ya incluida en el proyecto:

npm install prop-types

Una vez instalada, se puede importar y utilizar en los componentes para definir los tipos esperados de las props y marcar cuáles son obligatorias.

Ejemplo de cómo usar prop-types en un componente:

// Usuario.jsx
import PropTypes from 'prop-types';

export default function Usuario({ nombre, edad, esActivo }) {
  return (
    <div>
      <h1>Nombre: {nombre}</h1>
      <p>Edad: {edad}</p>
      <p>{esActivo ? "Activo" : "Inactivo"}</p>
    </div>
  );
};

Usuario.propTypes = {
  nombre: PropTypes.string.isRequired,
  edad: PropTypes.number.isRequired,
  esActivo: PropTypes.bool
};

En este ejemplo, Usuario.propTypes define que el componente Usuario espera recibir tres props: nombre (de tipo string y obligatorio), edad (de tipo number y obligatorio) y esActivo (de tipo bool y opcional).

Tipos de validación disponibles

prop-types ofrece una variedad de validaciones para diferentes tipos de datos y estructuras. Algunos de los tipos más comunes incluyen:

• Primitivos: PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.func, PropTypes.array, PropTypes.object
• React elements: PropTypes.element para elementos de React y PropTypes.node para cualquier cosa que pueda ser renderizada
• Instancias de clases: PropTypes.instanceOf(MyClass)
• Enumeraciones: PropTypes.oneOf(['valor1', 'valor2'])
• Unión de tipos: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
• Arrays y objetos de un tipo específico: PropTypes.arrayOf(PropTypes.number) y PropTypes.objectOf(PropTypes.string)
• Formas de objetos: PropTypes.shape({ nombre: PropTypes.string, edad: PropTypes.number })
• Validación personalizada: PropTypes.custom((props, propName, componentName) => { ... })

Validación de props con valores por defecto

Es posible combinar prop-types con defaultProps para definir valores por defecto y validaciones de manera conjunta. Esto asegura que siempre haya valores válidos para las props críticas y facilita el desarrollo y mantenimiento del componente.

// Boton.jsx
import PropTypes from 'prop-types';

export default function Boton({ color, texto }) {
  return <button style={{ backgroundColor: color }}>{texto}</button>;
};

Boton.defaultProps = {
  color: 'blue',
  texto: 'Click me'
};

Boton.propTypes = {
  color: PropTypes.string,
  texto: PropTypes.string
};

En este ejemplo, Boton tiene valores por defecto para color y texto, y propTypes asegura que, si se pasan, deben ser de tipo string.

La validación de props es una práctica esencial en React para desarrollar componentes robustos y mantenibles. Utilizando prop-types, se puede asegurar que los componentes reciban los tipos de datos esperados, lo cual ayuda a prevenir errores y facilita la documentación y comprensión del código.