Props y State en React

Las props y el state son dos conceptos fundamentales de React para la gestión de los datos. Permiten que los componentes sean dinámicos e interactivos.

Las Props

Las props (propiedades) son una forma de pasar datos de un componente padre a un componente hijo. Son de solo lectura y el componente hijo no puede modificarlas.

Uso de las props

// Componente hijo
function UserCard({ name, age, email }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>Âge : {age}</p>
      <p>Email : {email}</p>
    </div>
  );
}

// Componente padre
function App() {
  return (
    <div className="app">
      <UserCard
        name="Marie Dupont"
        age={25}
        email="marie@example.com"
      />
    </div>
  );
}

Props por defecto

Puedes definir valores por defecto para las props:

function Button({ text = "Cliquez-moi", onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

Props.children

La prop especial children permite pasar contenido entre las etiquetas de un componente:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Uso
<Card>
  <h2>Titre</h2>
  <p>Contenu</p>
</Card>