Componentes y props

1.Props: los datos que recibe un componente

Un componente que siempre muestra lo mismo sirve de poco. Para que una misma pieza muestre datos distintos usamos las props (de *properties*, «propiedades»): información que el componente padre le pasa al hijo, igual que los atributos de una etiqueta HTML.

React reúne todas las props en un único objeto que recibe como primer parámetro la función. Por eso se escribe props.nombre. El mismo componente Saludo produce tres resultados distintos.

2.Desestructurar: la forma habitual

Escribir props. en cada línea cansa. Lo habitual es desestructurar el objeto en la propia lista de parámetros (lo viste en el curso de JavaScript):

• Valor por defecto: rol = "Estudiante" se usa cuando no pasas esa prop.
• Textos se pasan con comillas: nombre="Ana".
• Todo lo demás (números, booleanos, arrays, objetos, funciones) se pasa con llaves: edad={28}.
• Una prop booleana sin valor equivale a true: <Boton deshabilitado /> es igual a deshabilitado={true}.

3.Qué se puede pasar como prop

4.La prop especial children

A veces quieres pasar a un componente otros elementos dentro de sus etiquetas, igual que haces con un <div> en HTML. Todo lo que pongas entre la etiqueta de apertura y de cierre llega como la prop children:

5.Las props son de solo lectura

Un componente nunca debe modificar sus propias props. Piensa en ellas como los argumentos de una función pura: mismos datos de entrada, misma pantalla. Si necesitas algo que cambie con el tiempo, usarás estado (lección 4).

function Contador({ valor }) {
  valor = valor + 1;        // ❌ no modifiques las props
  return <p>{valor}</p>;
}

function Contador({ valor }) {
  const siguiente = valor + 1;   // ✅ un valor derivado
  return <p>{siguiente}</p>;
}

6.Organizar: un componente por archivo

En un proyecto real, cada componente suele vivir en su propio archivo y se importa donde se necesita. Esta es la estructura típica:

export default function Tarjeta({ titulo, children }) {
  return (
    <article className="tarjeta">
      <h2>{titulo}</h2>
      {children}
    </article>
  );
}

import Tarjeta from "./components/Tarjeta.jsx";

export default function App() {
  return (
    <Tarjeta titulo="Hola">
      <p>Contenido de la tarjeta</p>
    </Tarjeta>
  );
}

7.Errores frecuentes

• Pasar un número entre comillas: precio="25" es el texto «25», no el número 25. Usa precio={25}.
• Olvidar las llaves en el parámetro: function Perfil(nombre) recibe todo el objeto de props; escribe function Perfil({ nombre }).
• Modificar una prop: son de solo lectura; calcula un valor nuevo.
• Esperar children sin pintarlo: si no escribes {children}, el contenido se ignora.
• Nombres de props mal escritos: <Perfil nomber="Ana" /> no da error, pero nombre queda undefined.
• Pasar objetos nuevos en cada dibujo sin necesidad (se vuelve relevante con memo, más adelante).

8.Glosario