📤 Cómo usar props en React para pasar datos entre componentes

📤 Cómo usar props en React para pasar datos entre componentes

En React, los props (abreviatura de "properties") permiten pasar datos de un componente padre a un componente hijo. Esto hace que los componentes sean dinámicos y reutilizables, evitando hardcodear información dentro de ellos.

---

1️⃣ Componente padre pasando props

El componente padre envía datos como atributos al hijo:

function Child(props) {
  return <h2>Hola, {props.name}!</h2>;
}

function Parent() {
  return <Child name="Ana" />;
}

ReactDOM.createRoot(document.getElementById('root')).render(<Parent />);
  

Hola, Ana!

---

2️⃣ Pasar múltiples props

Podemos enviar más de un prop para que el componente hijo tenga más información:

function Profile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Edad: {props.age}</p>
      <p>Ciudad: {props.city}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Profile name="Jorge" age={30} city="Barcelona" />
);
  

Jorge
Edad: 30
Ciudad: Barcelona

---

3️⃣ Props con valores dinámicos

Los props no tienen que ser solo texto, pueden ser variables, funciones o incluso objetos:

const user = {
  name: "Ana",
  age: 28
};

function UserCard(props) {
  return <h3>{props.user.name} tiene {props.user.age} años.</h3>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<UserCard user={user} />);
  

Ana tiene 28 años.

---

4️⃣ Buenas prácticas al usar props

• ✅ Nombrar los props de manera clara y descriptiva.
• ✅ Evitar modificar los props dentro del componente hijo (son inmutables).
• ✅ Usar destructuración para simplificar el acceso a los props.
• ✅ Documentar los props esperados para cada componente.

---

5️⃣ Destructuración de props

Para un código más limpio, podemos usar destructuración:

function Profile({ name, age, city }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Edad: {age}</p>
      <p>Ciudad: {city}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Profile name="Jorge" age={30} city="Barcelona" />
);
  

← Volver al índice