Props

Que son los Props?

Props (abreviatura de "properties") son la forma de pasar datos de un componente padre a un componente hijo. Son como los argumentos de una funcion—permiten que los componentes sean dinamicos y reutilizables.

Pasando Props

// Componente padre pasando props
function App() {
  return (
    <div>
      <Saludo nombre="Maria" edad={25} />
      <Saludo nombre="Juan" edad={30} />
    </div>
  );
}

// Componente hijo recibiendo props
function Saludo(props) {
  return (
    <div>
      <h1>Hola, {props.nombre}!</h1>
      <p>Tienes {props.edad} anios.</p>
    </div>
  );
}

Destructuring de Props

// Destructuring en los parametros (preferido)
function Saludo({ nombre, edad }) {
  return (
    <div>
      <h1>Hola, {nombre}!</h1>
      <p>Tienes {edad} anios.</p>
    </div>
  );
}

// O destructuring en el cuerpo
function Saludo(props) {
  const { nombre, edad } = props;
  return (
    <div>
      <h1>Hola, {nombre}!</h1>
      <p>Tienes {edad} anios.</p>
    </div>
  );
}

Props por Defecto

function Saludo({ nombre = "Invitado", edad = 0 }) {
  return (
    <div>
      <h1>Hola, {nombre}!</h1>
      <p>Tienes {edad} anios.</p>
    </div>
  );
}

// Uso
<Saludo />  // Muestra: Hola, Invitado! Tienes 0 anios.
<Saludo nombre="Ana" />  // Muestra: Hola, Ana! Tienes 0 anios.

Children Props

// El prop children contiene lo que esta entre las etiquetas
function Tarjeta({ children, titulo }) {
  return (
    <div className="tarjeta">
      <h2>{titulo}</h2>
      <div className="contenido">
        {children}
      </div>
    </div>
  );
}

// Uso
function App() {
  return (
    <Tarjeta titulo="Mi Tarjeta">
      <p>Este es el contenido de la tarjeta.</p>
      <button>Accion</button>
    </Tarjeta>
  );
}

Spread de Props

function App() {
  const datosUsuario = {
    nombre: "Carlos",
    edad: 28,
    email: "carlos@ejemplo.com"
  };

  return <PerfilUsuario {...datosUsuario} />;
}

// Equivalente a:
// <PerfilUsuario nombre="Carlos" edad={28} email="carlos@ejemplo.com" />