Props

Les Props

Les props (propriétés) sont les paramètres passés à un composant depuis son parent. Elles sont en lecture seule — un composant ne doit jamais modifier ses propres props.

Passage de props

// Parent
<Profil nom="Hugo" age={25} admin={true} />

// Enfant
function Profil({ nom, age, admin }) {
  return (
    <div>
      <p>{nom}, {age} ans {admin && "👑"}</p>
    </div>
  );
}

Valeurs par défaut

function Bouton({ label = "Cliquer", variant = "primary" }) {
  return <button className={variant}>{label}</button>;
}

Spread de props

const props = { nom: "Hugo", age: 25 };
<Profil {...props} />

La prop children

function Panel({ title, children }) {
  return (
    <section>
      <h3>{title}</h3>
      {children}
    </section>
  );
}

<Panel title="Info">
  <p>Texte dans le panel</p>
</Panel>

PropTypes (validation)

import PropTypes from 'prop-types';

Profil.propTypes = {
  nom: PropTypes.string.isRequired,
  age: PropTypes.number,
  admin: PropTypes.bool,
};

Profil.defaultProps = {
  age: 0,
  admin: false,
};