Props React : passer des données aux composants

Les props sont les entrées d'un composant React. Un parent les passe sous forme d'attributs dans le JSX, <UserCard name="Ada" online={true} />, et l'enfant les reçoit dans un seul objet, que vous déstructurez en général dans les paramètres de la fonction. Les props permettent à un même composant d'afficher des données différentes à chaque utilisation.

function UserCard({ name, role, online }) {
    return (
        <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 10, marginBottom: 8 }}>
            <strong>{name}</strong> <span style={{ color: '#666' }}>{role}</span>
            <div style={{ color: online ? 'green' : '#999' }}>
                {online ? 'Online' : 'Offline'}
            </div>
        </div>
    );
}

export default function App() {
    return (
        <div>
            <UserCard name="Ada Lovelace" role="Engineer" online={true} />
            <UserCard name="Alan Turing" role="Researcher" online={false} />
            <UserCard name="Grace Hopper" role="Admiral" online />
        </div>
    );
}

Le même UserCard affiche trois personnes différentes. Regardez la dernière : un attribut sans valeur, online, signifie online={true}. Ajoutez une quatrième carte avec votre nom et votre rôle.

Passer et lire des props

Passez une chaîne entre guillemets et toute autre valeur entre accolades : nombres, booléens, tableaux, objets, fonctions, et même du JSX.

<Product
    title="Desk lamp"
    price={39.5}
    inStock={false}
    tags={['light', 'office']}
    seller={{ name: 'Lumen', rating: 4.8 }}
/>

React rassemble tous les attributs dans un objet et le passe comme premier argument du composant. Vous pouvez le lire sous le nom props, ou extraire directement dans la liste des paramètres les champs dont vous avez besoin :

function Product(props) {
    return <h3>{props.title}</h3>;
}

function Product({ title, price, seller }) {
    return <h3>{title}, ${price} from {seller.name}</h3>;
}

Les deux versions reçoivent le même objet. La déstructuration est le style courant, car la signature de la fonction indique alors exactement quelles props le composant utilise.

Valeurs par défaut

Donnez une valeur par défaut à une prop avec la valeur par défaut de déstructuration de JavaScript, = value. Elle s'applique quand le parent omet la prop ou passe undefined. Elle ne s'applique pas à null, 0, false ou '', qui sont de vraies valeurs.

function Button({ label = 'Click me', size = 'medium', color = '#2563eb' }) {
    const padding = { small: '2px 8px', medium: '6px 14px', large: '10px 20px' }[size];
    return (
        <button style={{ padding, background: color, color: 'white', border: 0, borderRadius: 6, margin: 4 }}>
            {label} ({String(size)})
        </button>
    );
}

export default function App() {
    return (
        <div>
            <Button />
            <Button label="Save" size="large" />
            <Button label="Undefined" size={undefined} />
            <Button label="Null" size={null} />
        </div>
    );
}

Les trois premiers boutons reprennent leurs valeurs par défaut là où une prop est absente ou vaut undefined. Le dernier passe null, donc size vaut vraiment null, et la recherche ne trouve aucun padding. Remplacez size={null} par size="small" pour corriger.

L'ancien code définit les valeurs par défaut avec une propriété statique, Button.defaultProps = { size: 'medium' }. React 19 a supprimé defaultProps pour les composants fonctions : le JSX l'ignore sur une fonction, sans avertissement. Il fonctionne toujours sur les composants classes. Utilisez les valeurs par défaut de déstructuration.

Passer des fonctions en props

Les données descendent : un parent passe des props à ses enfants, jamais l'inverse. Quand un enfant doit signaler au parent qu'il s'est passé quelque chose, le parent passe une fonction, et l'enfant l'appelle. Par convention, ces props s'appellent onSomething.

import { useState } from 'react';

function Rating({ value, onRate }) {
    return (
        <div>
            {[1, 2, 3, 4, 5].map((n) => (
                <button key={n} onClick={() => onRate(n)} style={{ fontWeight: n === value ? 'bold' : 'normal' }}>
                    {n}
                </button>
            ))}
        </div>
    );
}

export default function App() {
    const [rating, setRating] = useState(0);

    function handleRate(n) {
        console.log('Rating picked a value:', n);
        setRating(n);
    }

    return (
        <div>
            <Rating value={rating} onRate={handleRate} />
            <p>{rating === 0 ? 'Not rated yet' : `You rated it ${rating} out of 5`}</p>
        </div>
    );
}

Rating ne stocke rien. Il affiche la value qu'il reçoit et signale les clics par onRate. L'état vit dans App, qui le redescend. Passez directement onRate={setRating} au lieu de handleRate et cela fonctionne encore : un setter est aussi une fonction. Déplacer ainsi l'état dans un parent commun s'appelle faire remonter l'état.

Décomposer des props

Quand vous avez déjà un objet dont les clés correspondent aux props d'un composant, décomposez-le avec {...object} au lieu d'écrire chaque attribut. La syntaxe du reste fait l'inverse dans la liste des paramètres : prendre quelques props par leur nom, regrouper tout le reste, et le transmettre.

function Avatar({ name, color, size }) {
    return (
        <span
            style={{ display: 'inline-grid', placeItems: 'center', width: size, height: size, borderRadius: '50%', background: color, marginInlineEnd: 6 }}
        >
            {name[0]}
        </span>
    );
}

function TextField({ label, ...inputProps }) {
    return (
        <label style={{ display: 'block', marginTop: 10 }}>
            {label} <input {...inputProps} />
        </label>
    );
}

export default function App() {
    const person = { name: 'Ada', color: '#fde68a', size: 40 };

    return (
        <div>
            <Avatar {...person} />
            <Avatar {...person} color="#bbf7d0" />
            <TextField label="Email" type="email" placeholder="you@example.com" maxLength={40} />
        </div>
    );
}

Le second avatar décompose person puis définit color : quand la même prop apparaît deux fois, la dernière l'emporte, placez donc les remplacements après la décomposition. TextField garde label pour lui et passe type, placeholder et maxLength directement à l'<input>. Utilisez la décomposition pour des enveloppes comme celle-ci ; ailleurs, lister les props explicitement permet de mieux voir ce qu'un composant reçoit.

Les props sont en lecture seule

Un composant ne doit jamais modifier ses propres props. Elles appartiennent au parent, et le même objet peut être partagé. Traitez-les comme des arguments de fonction que vous n'avez pas le droit de réaffecter :

function Counter({ count }) {
    count = count + 1; // wrong: changes a local copy, the parent never sees it
    return <p>{count}</p>;
}

function Profile(props) {
    props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
    return <p>{props.name}</p>;
}

Les props changent quand même au fil du temps. Quand le parent refait un rendu avec de nouvelles valeurs, l'enfant reçoit un nouvel objet props et fait son rendu avec :

import { useState } from 'react';

function Temperature({ celsius }) {
    const fahrenheit = (celsius * 9) / 5 + 32;
    return (
        <p>
            {celsius}°C is {fahrenheit}°F, {celsius >= 25 ? 'warm' : 'cool'}.
        </p>
    );
}

export default function App() {
    const [celsius, setCelsius] = useState(20);

    return (
        <div>
            <input type="range" min={-10} max={40} value={celsius} onChange={(e) => setCelsius(Number(e.target.value))} />
            <Temperature celsius={celsius} />
            <button onClick={() => setCelsius(celsius + 5)}>Warmer</button>
        </div>
    );
}

Temperature ne modifie jamais celsius. Il en calcule fahrenheit à chaque rendu. Faites glisser le curseur et l'état du parent change, donc l'enfant reçoit une nouvelle prop. Si un enfant a besoin d'une valeur qu'il peut modifier lui-même, cette valeur est un état, pas une prop.

Props et état

Les props et l'état sont tous deux de simples valeurs JavaScript qui influencent ce qu'un composant affiche, et un changement de l'un ou de l'autre déclenche un nouveau rendu du composant. La différence tient à qui possède la valeur.

La même valeur est souvent les deux. Dans l'exemple de température ci-dessus, celsius est un état dans App et une prop dans Temperature. Le propriétaire la garde comme état et la passe vers le bas comme prop, avec une fonction pour la modifier quand un enfant en a besoin.

Une prop peut contenir n'importe quelle valeur, y compris du JSX et des composants. Passer un élément comme icon={<StarIcon />} permet à un parent de remplir un emplacement dans un enfant, la même idée que children avec le nom de votre choix.

La prop children

Tout ce que vous placez entre les balises ouvrante et fermante d'un composant arrive dans une prop nommée children. C'est ainsi que l'on construit des enveloppes comme des cartes, des panneaux et des mises en page qui ne connaissent pas leur contenu à l'avance :

function Panel({ title, children }) {
    return (
        <section style={{ border: '1px solid #ddd', borderRadius: 8, padding: 12, marginBottom: 8 }}>
            <h4 style={{ margin: '0 0 8px' }}>{title}</h4>
            {children}
        </section>
    );
}

export default function App() {
    return (
        <div>
            <Panel title="About">
                <p>Panels can hold any JSX.</p>
            </Panel>
            <Panel title="Links">
                <ul>
                    <li>Props</li>
                    <li>State</li>
                </ul>
            </Panel>
        </div>
    );
}

La page sur children explique comment passer plusieurs emplacements et manipuler children sans risque.

Les keys ne sont pas des props

key ressemble à un attribut, mais React le garde pour lui afin d'associer les éléments d'une liste d'un rendu à l'autre. Le composant ne le reçoit jamais :

function Row(props) {
    console.log('Row props.key =', String(props.key), 'props.id =', props.id);
    return <li>{props.label}</li>;
}

export default function App() {
    const fruits = [
        { id: 'a1', label: 'Apple' },
        { id: 'b2', label: 'Banana' },
    ];

    return (
        <ul>
            {fruits.map((fruit) => (
                <Row key={fruit.id} id={fruit.id} label={fruit.label} />
            ))}
        </ul>
    );
}

La console affiche props.key à undefined et props.id avec la vraie valeur. Quand un enfant a besoin de l'identifiant, passez-le une seconde fois sous un autre nom, comme id ici. Un build de développement avertit aussi quand vous lisez props.key ; l'aperçu fonctionne comme un build de production, vous voyez donc seulement le undefined.