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)