Props e State no React

Props e state são dois conceitos fundamentais do React para o gerenciamento de dados. Eles permitem tornar os componentes dinâmicos e interativos.

As Props

As props (propriedades) são uma forma de passar dados de um componente pai para um componente filho. Elas são somente leitura e não podem ser modificadas pelo componente filho.

Utilização das props

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

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

Props padrão

Você pode definir valores padrão para as props:

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

Props.children

A prop especial children permite passar conteúdo entre as tags de um componente:

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

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