Lección 6 de 13 · Lectura y práctica

Props: Pasando datos

Props: Comunicacion entre componentes Las props (propiedades) permiten pasar datos de un componente padre a un componente hijo. Sintaxis basica // Componente que recibe props function Saludo(props) { return Hola.

Del concepto a la práctica

Taller de esta lección

Las props forman un contrato de entrada. Para una tarjeta de disponibilidad conviene enviar datos y una función, pero el hijo no debe cambiar directamente esos datos. La función puede notificar una intención al padre, que conserva la decisión sobre el estado.

Ejemplo resuelto

jsx

function Libro({ titulo, disponible, onReservar }) {
  return (
    <article>
      <h2>{titulo}</h2>
      <button disabled={!disponible} onClick={onReservar}>Reservar</button>
    </article>
  );
}

Si disponible es falso, el botón queda desactivado; el componente no intenta editar la prop.

Pruébalo

Define un registro con título y disponibilidad.
Pasa ambos valores a Libro.
Pasa una función que registre la intención de reservar.
Cambia la disponibilidad en el padre y observa el botón.

Comprueba tu resultado

Con disponible=false, el botón no debe permitir la acción; con true, sí.

Error frecuente: hacer disponible = false dentro del hijo. Corrígelo elevando el cambio al padre mediante onReservar. Si una lista de hobbies se renderiza, cada elemento debe tener una identidad estable.

La intención cambia el estado del padre

Usa un padre con const [disponible,setDisponible]=useState(true) y <Libro titulo="Mar abierto" disponible={disponible} onReservar={()=>setDisponible(false)}/>; importa useState en ese archivo. Un primer clic modifica el estado del padre y el botón queda desactivado. Con false desde el principio, la acción no se ofrece; no interpretes disabled como autorización de servidor en una reserva real.

Reasignar una variable local desestructurada de una prop, como el ejemplo histórico contador++, no cambia por sí mismo la prop del padre; sigue siendo una forma incorrecta de representar una actualización. La mutación de un objeto compartido es diferente y puede alterar datos ajenos silenciosamente. Por eso conserva las entradas de solo lectura y comunica la intención mediante un callback. El hijo no debe invocar onReservar durante el render: onClick={onReservar} registra la función, onClick={onReservar()} la ejecuta antes de la interacción. Comprueba true→false, una sola reserva local y que reiniciar la app vuelve al estado inicial porque aquí no hay persistencia.

El Padre envía titulo Reserva y children al Panel; el botón Cerrar notifica al Padre mediante onClose. — **Props y children tienen papeles distintos**
children también es una prop: aquí aporta el contenido interior y titulo aporta el encabezado del Panel. El botón Cerrar llama al callback onClose que recibió del padre; el padre decide si mantiene el panel visible.
Ver la infografía en tamaño completo ↗

Props: Comunicacion entre componentes

Las props (propiedades) permiten pasar datos de un componente padre a un componente hijo.

Sintaxis basica

// Componente que recibe props
function Saludo(props) {
  return <h1>Hola {props.nombre}!</h1>;
}

// Usando el componente
function App() {
  return (
    <div>
      <Saludo nombre="Maria" />
      <Saludo nombre="Juan" />
    </div>
  );
}

// Renderiza:
// Hola Maria!
// Hola Juan!

Destructuring de props

// Forma comun (destructuring en parametro)
function Saludo({ nombre, edad }) {
  return (
    <div>
      <h1>Hola {nombre}!</h1>
      <p>Tienes {edad} anos</p>
    </div>
  );
}

// Uso
<Saludo nombre="Maria" edad={25} />

Diferentes tipos de props

function Usuario({
  nombre,           // String
  edad,             // Number
  esAdmin,          // Boolean
  hobbies,          // Array
  direccion,        // Object
  onSaludar         // Function
}) {
  return (
    <div>
      <h2>{nombre}</h2>
      <p>Edad: {edad}</p>
      {esAdmin && <span>Admin</span>}
      <ul>
        {hobbies.map(h => <li key={h}>{h}</li>)}
      </ul>
      <p>Ciudad: {direccion.ciudad}</p>
      <button onClick={onSaludar}>Saludar</button>
    </div>
  );
}

// Uso
<Usuario
  nombre="Maria"
  edad={25}
  esAdmin={true}
  hobbies={['leer', 'correr']}
  direccion={{ ciudad: 'Madrid', pais: 'Espana' }}
  onSaludar={() => alert('Hola!')}
/>

Props por defecto

function Boton({ texto = "Click", color = "blue" }) {
  return (
    <button style={{ backgroundColor: color }}>
      {texto}
    </button>
  );
}

// Sin props - usa valores por defecto
<Boton />

// Con props - sobrescribe
<Boton texto="Enviar" color="green" />

Props son de solo lectura

// NUNCA modifiques props directamente
function Mal({ contador }) {
  contador++; // MAL! No hagas esto
  return <p>{contador}</p>;
}

// Las props fluyen de padre a hijo (unidireccional)

Sigue con React Fundamentals

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: Creando componentes Siguiente: Children: Componentes contenedores →Entrar y guardar mi progreso