Las props

Introducción
En React, props (abreviatura de propiedades) son una forma de pasar datos de un componente padre a un componente hijo. Son como "argumentos" para una función en JavaScript, pero en este caso, se usan para personalizar y controlar los componentes.

1. Qué son las Props? #

Las props son un objeto que contiene datos o funciones que el componente recibe como parámetros. Son de solo lectura, lo que significa que un componente no puede cambiar las props que recibe.

¿Cómo se usan las Props? #

Se pasan como atributos en la etiqueta del componente.

1// Componente padre
2import React from "react";
3
4function App() {
5  return (
6    <div>
7      <Saludo nombre="María" />
8      <Saludo nombre="Juan" />
9    </div>
10  );
11}
12
13// Componente hijo
14function Saludo(props) {
15  return <h1>¡Hola, {props.nombre}!</h1>;
16}
17
18export default App;

Explicación #

1. En el componente padre App, pasamos nombre como una prop al componente Saludo.
2. En el componente hijo Saludo, usamos props.nombre para acceder al valor de la prop.

El resultado será:

¡Hola, María!
¡Hola, Juan!

2. Props con Objetos y Funciones #

También podemos pasar objetos, arrays o funciones como props.

1function App() {
2  const usuario = { nombre: "Carlos", edad: 25 };
3  const mostrarMensaje = () => alert("Hola desde la función!");
4
5  return (
6    <div>
7      <Perfil datos={usuario} saludar={mostrarMensaje} />
8    </div>
9  );
10}
11
12function Perfil(props) {
13  return (
14    <div>
15      <p>Nombre: {props.datos.nombre}</p>
16      <p>Edad: {props.datos.edad}</p>
17      <button onClick={props.saludar}>Saludar</button>
18    </div>
19  );
20}
21
22export default App;

Explicación #

1. Pasamos el objeto usuario como prop datos y la función mostrarMensaje como prop saludar.
2. En el componente Perfil, usamos props.datos.nombre, props.datos.edad y ejecutamos la función props.saludar al hacer clic en el botón.

3. Desestructuración de Props #

Para hacer el código más limpio, podemos desestructurar las props.

1function Perfil({ datos, saludar }) {
2  return (
3    <div>
4      <p>Nombre: {datos.nombre}</p>
5      <p>Edad: {datos.edad}</p>
6      <button onClick={saludar}>Saludar</button>
7    </div>
8  );
9}

Esto elimina la necesidad de escribir props. cada vez. El resultado será el mismo.

4. Props por Defecto #

Podemos definir valores predeterminados para las props si no se pasan desde el componente padre.

1function Saludo({ nombre = "Invitado" }) {
2  return <h1>¡Hola, {nombre}!</h1>;
3}
4
5function App() {
6  return (
7    <div>
8      <Saludo />
9      <Saludo nombre="Ana" />
10    </div>
11  );
12}
13
14export default App;

Resultado #

¡Hola, Invitado!
¡Hola, Ana!

5. Validación de Props con prop-types #

Para asegurarnos de que las props son del tipo correcto, usamos la librería prop-types.

1. Instala la librería:

   1npm install prop-types

2. Usa prop-types en el componente:

1import PropTypes from "prop-types";
2
3function Saludo({ nombre, edad }) {
4  return (
5    <div>
6      <h1>¡Hola, {nombre}!</h1>
7      <p>Edad: {edad}</p>
8    </div>
9  );
10}
11
12Saludo.propTypes = {
13  nombre: PropTypes.string.isRequired,
14  edad: PropTypes.number,
15};
16
17export default Saludo;

• string.isRequired: nombre debe ser una cadena y es obligatorio.
• number: edad debe ser un número, pero es opcional.