React Props : Transmettez des Données Entre Composants

Qu'est-ce que les Props ?

Les props sont des valeurs transmises d'un composant parent à un composant enfant sous forme de propriétés. Elles peuvent transporter n'importe quel type de donnée : des chaînes de caractères, des nombres, des objets, des tableaux, ou même des fonctions.

Voici un exemple simple où un composant parent transmet une prop appelée nom à un composant enfant :

📋 Copier le code

function Bonjour({ nom }) {
    return <h1>Bonjour, {nom} !</h1>;
}

ReactDOM.render(<Bonjour nom="Alice" />, document.getElementById('root'));
        

Explication :

• function Bonjour({ nom }) : Définit un composant fonctionnel qui accepte une prop appelée nom.
• {nom} : Insère dynamiquement la valeur de la prop nom dans le JSX.
• <Bonjour nom="Alice" /> : Utilise le composant Bonjour avec la prop nom définie à "Alice".

Comment Utiliser les Props ?

Les props (contraction de "properties") sont des valeurs transmises d'un composant parent à un composant enfant dans React. Elles permettent aux composants de communiquer entre eux et de rendre des interfaces utilisateur dynamiques. Dans cette section, nous allons explorer comment utiliser les props étape par étape.

1. Passage de Données Simples via les Props

Imaginons que vous souhaitiez créer un composant qui affiche un message personnalisé. Vous pouvez passer ce message en tant que prop depuis le composant parent. Voici comment cela fonctionne :

📋 Copier le code

function Saluer({ message, nom }) {
    return <p>{message}, {nom} !</p>;
}

function App() {
    return (
        <div>
            <Saluer message="Bonjour" nom="Alice" />
            <Saluer message="Salut" nom="Bob" />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
    

Explication détaillée :

1. function Saluer({ message, nom }) { ... } :
   • Cette ligne définit un composant fonctionnel appelé Saluer.
   • { message, nom } utilise la destructuration pour extraire automatiquement les propriétés message et nom des props passées au composant.
2. return <p>{message}, {nom} !</p>; :
   • Ce composant retourne du JSX contenant un élément <p>.
   • {message} et {nom} insèrent dynamiquement les valeurs des props correspondantes dans le texte affiché.
3. function App() { ... } :
   • Nous créons un composant parent appelé App.
   • Ce composant utilise deux fois le composant Saluer, mais avec des valeurs différentes pour les props message et nom.
4. <Saluer message="Bonjour" nom="Alice" /> :
   • Ici, nous utilisons le composant Saluer avec deux props :
   • message="Bonjour" : La valeur "Bonjour" est passée à la prop message.
   • nom="Alice" : La valeur "Alice" est passée à la prop nom.
5. ReactDOM.render(<App />, document.getElementById('root')); :
   • Cette ligne rend le composant App dans l'élément HTML ayant l'id root.
   • Lorsque App est rendu, il inclut deux instances du composant Saluer, chacun avec ses propres props.

2. Passage de Fonctions via les Props

Les props ne se limitent pas aux données simples comme des chaînes de caractères ou des nombres. Vous pouvez également passer des fonctions en tant que props. Cela permet aux composants enfants de communiquer avec leurs parents. Voici un exemple :

📋 Copier le code

function Bouton({ onClick, label }) {
    return (
        <button onClick={onClick}>
            {label}
        </button>
    );
}

function ComposantParent() {
    function handleClick() {
        alert("Bouton cliqué !");
    }

    return <Bouton onClick={handleClick} label="Cliquez ici" />;
}

ReactDOM.render(<ComposantParent />, document.getElementById('root'));
    

Explication détaillée :

1. function Bouton({ onClick, label }) { ... } :
   • Ceci définit un composant fonctionnel appelé Bouton.
   • { onClick, label } extrait deux props : onClick (une fonction) et label (une chaîne de caractères).
2. return (<button onClick={onClick}>{label}</button>); :
   • Ce composant retourne un bouton avec deux attributs :
   • onClick={onClick} : Lorsque le bouton est cliqué, la fonction passée via la prop onClick sera exécutée.
   • {label} : Insère dynamiquement le texte du bouton passé via la prop label.
3. function ComposantParent() { ... } :
   • Ce composant parent s'appelle ComposantParent.
   • Il contient une fonction appelée handleClick, qui affiche une alerte lorsque le bouton est cliqué.
4. <Bouton onClick={handleClick} label="Cliquez ici" /> :
   • Ici, nous utilisons le composant Bouton en lui passant deux props :
   • onClick={handleClick} : La fonction handleClick définie dans le parent est passée en tant que prop.
   • label="Cliquez ici" : Le texte "Cliquez ici" est passé comme prop pour être affiché sur le bouton.
5. ReactDOM.render(<ComposantParent />, document.getElementById('root')); :
   • Cette ligne rend le composant ComposantParent dans l'élément HTML ayant l'id root.
   • Lorsque vous cliquez sur le bouton, l'alerte "Bouton cliqué !" s'affiche grâce à la fonction passée via la prop onClick.

3. Exemple Concret : Compteur avec Communication Parent-Enfant

Voici un exemple plus avancé où un composant parent transmet une fonction à un composant enfant pour modifier son état. Cela illustre comment les props peuvent être utilisées pour établir une communication entre composants.

📋 Copier le code

import React, { useState } from 'react';

function ComposantParent() {
    const [message, setMessage] = useState("Salut !");

    function handleChange(nouveauMessage) {
        setMessage(nouveauMessage);
    }

    return (
        <div>
            <h1>{message}</h1>
            <ComposantEnfant onMessageChange={handleChange} />
        </div>
    );
}

function ComposantEnfant({ onMessageChange }) {
    return (
        <button onClick={() => onMessageChange("Coucou depuis l'enfant !")}>
            Modifier le message
        </button>
    );
}

ReactDOM.render(<ComposantParent />, document.getElementById('root'));
    

Explication détaillée :

1. import React, { useState } from 'react'; :
   • Nous importons React et le hook useState pour gérer l'état local dans le composant parent.
2. function ComposantParent() { ... } :
   • Ce composant parent s'appelle ComposantParent.
   • Il utilise useState pour initialiser une variable d'état appelée message avec la valeur "Salut !".
   • function handleChange(nouveauMessage) : Cette fonction met à jour l'état message lorsqu'elle est appelée.
3. <ComposantEnfant onMessageChange={handleChange} /> :
   • Le composant parent passe la fonction handleChange au composant enfant via une prop appelée onMessageChange.
4. function ComposantEnfant({ onMessageChange }) { ... } :
   • Ce composant enfant s'appelle ComposantEnfant.
   • Il reçoit une prop appelée onMessageChange, qui est une fonction passée depuis le parent.
5. <button onClick={() => onMessageChange("Coucou depuis l'enfant !")}> :
   • Ce bouton appelle la fonction passée via la prop onMessageChange lorsqu'il est cliqué.
   • "Coucou depuis l'enfant !" est la nouvelle valeur que le composant enfant transmet au parent pour mettre à jour l'état.
6. ReactDOM.render(<ComposantParent />, document.getElementById('root')); :
   • Cette ligne rend le composant parent ComposantParent dans l'élément HTML ayant l'id root.
   • Lorsque vous cliquez sur le bouton, le texte affiché dans le composant parent change dynamiquement grâce à la fonction passée via les props.

4. Validation des Props avec PropTypes

Pour garantir que les props passées à un composant sont valides, React fournit une bibliothèque appelée prop-types. Voici un exemple simple :

📋 Copier le code

import PropTypes from 'prop-types';

function Bonjour({ nom }) {
    return <h1>Bonjour, {nom} !</h1>;
}

// Validation des props
Bonjour.propTypes = {
    nom: PropTypes.string.isRequired // La prop "nom" doit être une chaîne de caractères et est obligatoire
};

ReactDOM.render(<Bonjour nom="Alice" />, document.getElementById('root'));
    

Explication détaillée :

1. import PropTypes from 'prop-types'; :
   • Nous importons la bibliothèque prop-types pour valider les props.
2. Bonjour.propTypes = { nom: PropTypes.string.isRequired }; :
   • Cette ligne spécifie que la prop nom doit être une chaîne de caractères (string) et est obligatoire (isRequired).
   • Si une valeur non valide est passée ou si la prop est manquante, React affichera un avertissement dans la console.
3. <Bonjour nom="Alice" /> :
   • Ce composant respecte la validation car la prop nom est une chaîne de caractères et est fournie.

5. Définition de Valeurs Par Défaut avec defaultProps

Si certaines props sont optionnelles, vous pouvez leur donner des valeurs par défaut. Voici un exemple :

📋 Copier le code

function Saluer({ message, nom }) {
    return <p>{message}, {nom} !</p>;
}

// Définition des valeurs par défaut
Saluer.defaultProps = {
    message: "Bonjour",
    nom: "Utilisateur"
};

ReactDOM.render(<Saluer />, document.getElementById('root'));
// Résultat : Bonjour, Utilisateur !
    

Explication détaillée :

1. Saluer.defaultProps = { message: "Bonjour", nom: "Utilisateur" }; :
   • Cette ligne définit des valeurs par défaut pour les props message et nom.
   • Si ces props ne sont pas fournies lors de l'utilisation du composant, elles prendront automatiquement ces valeurs.
2. <Saluer /> :
   • Ici, nous n'avons pas passé de props au composant Saluer.
   • React utilisera donc les valeurs par défaut définies précédemment : message="Bonjour" et nom="Utilisateur".

6. Meilleures Pratiques pour Utiliser les Props

Pour utiliser les props efficacement dans vos applications React, voici quelques conseils pratiques :

• Définissez toujours des types pour vos props : Utilisez PropTypes ou TypeScript pour valider les types des props et éviter les erreurs.
• Évitez de manipuler directement les props : Les props sont immuables, c'est-à-dire qu'elles ne peuvent pas être modifiées directement par le composant enfant. Si vous devez modifier une valeur, utilisez plutôt l'état (state) ou passez une fonction depuis le parent.
• Nommez vos props de manière explicite : Utilisez des noms clairs pour rendre votre code plus lisible et compréhensible.
• Utilisez des valeurs par défaut : Définissez des valeurs par défaut pour les props optionnelles afin d'éviter les erreurs lorsque ces props ne sont pas fournies.

7. Conclusion

Les props sont un outil puissant dans React qui permettent de transmettre des données et des fonctions entre composants. En combinant props, état et validation, vous pouvez créer des interfaces utilisateur dynamiques et robustes. Maintenant que vous comprenez comment utiliser les props, vous êtes prêt à explorer des concepts plus avancés comme les événements React.

Props Validations avec PropTypes

Pour garantir que les props passées à un composant sont valides, React fournit une bibliothèque appelée prop-types. Voici comment l'utiliser :

📋 Copier le code

import PropTypes from 'prop-types';

function Bonjour({ nom }) {
    return <h1>Bonjour, {nom} !</h1>;
}

// Validation des props
Bonjour.propTypes = {
    nom: PropTypes.string.isRequired // La prop "nom" doit être une chaîne de caractères et est obligatoire
};

ReactDOM.render(<Bonjour nom="Alice" />, document.getElementById('root'));
        

Explication :

• import PropTypes from 'prop-types'; : Importe la bibliothèque prop-types.
• Bonjour.propTypes = { ... } : Définit les types attendus pour les props.
• nom: PropTypes.string.isRequired : Spécifie que la prop nom doit être une chaîne de caractères et est obligatoire.

Passage de Valeurs Par Défaut avec defaultProps

Vous pouvez définir des valeurs par défaut pour les props en cas où elles ne sont pas fournies. Voici un exemple :

📋 Copier le code

function Saluer({ message, nom }) {
    return <p>{message}, {nom} !</p>;
}

// Définition des valeurs par défaut
Saluer.defaultProps = {
    message: "Bonjour",
    nom: "Utilisateur"
};

ReactDOM.render(<Saluer />, document.getElementById('root'));
// Résultat : Bonjour, Utilisateur !
        

Explication :

• Saluer.defaultProps = { ... } : Définit des valeurs par défaut pour les props.
• message: "Bonjour" et nom: "Utilisateur" : Si aucune valeur n'est passée pour ces props, elles prendront ces valeurs par défaut.

Exemple Complexe : Communication Parent-Enfant avec Props

Voici un exemple montrant comment un composant parent peut transmettre une fonction à un composant enfant pour lui permettre de modifier l'état du parent.

📋 Copier le code

import React, { useState } from 'react';

function ComposantParent() {
    const [message, setMessage] = useState("Salut !");

    function handleChange(nouveauMessage) {
        setMessage(nouveauMessage);
    }

    return (
        <div>
            <h1>{message}</h1>
            <ComposantEnfant onMessageChange={handleChange} />
        </div>
    );
}

function ComposantEnfant({ onMessageChange }) {
    return (
        <button onClick={() => onMessageChange("Coucou depuis l'enfant !")}>
            Modifier le message
        </button>
    );
}

export default ComposantParent;
        

Explication :

• const [message, setMessage] = useState("Salut !"); : Initialise l'état message avec la valeur "Salut !" dans le composant parent.
• function handleChange(nouveauMessage) : Définit une fonction qui met à jour l'état du parent.
• <ComposantEnfant onMessageChange={handleChange} /> : Passe la fonction handleChange au composant enfant via une prop appelée onMessageChange.
• <button onClick={() => onMessageChange("Coucou depuis l'enfant !")}> : Lorsque le bouton est cliqué, il appelle la fonction passée via la prop pour mettre à jour l'état du parent.

Meilleures Pratiques pour Utiliser les Props

Pour tirer pleinement parti des props dans vos applications React, voici quelques conseils :

• Définissez des types pour vos props : Utilisez PropTypes ou TypeScript pour valider les types des props et éviter les erreurs.
• Évitez de manipuler directement les props : Les props sont immuables. Si vous devez modifier une valeur, utilisez plutôt l'état (state) ou passez une fonction depuis le parent.
• Nommez vos props de manière explicite : Utilisez des noms clairs pour rendre votre code plus lisible.
• Utilisez des valeurs par défaut : Définissez des valeurs par défaut pour les props optionnelles.

Conclusion

Vous avez maintenant appris à utiliser les props dans React pour transmettre des données et des fonctions entre composants. En combinant props et état, vous pouvez créer des interfaces utilisateur dynamiques et interactives.

Prochain chapitre : Événements React