Les développeurs ReactJS peuvent rencontrer des difficultés à transmettre efficacement des données entre composants parent et enfant, créant des erreurs d’affichage.
Si ce problème n’est pas résolu, cela peut entraîner des incohérences dans l’interface utilisateur, augmentant le temps de développement et les frustrations liées à la gestion des props.
Cet article vous guide à travers un exercice pratique pour maîtriser le passage de données entre composants, en créant une table dynamique avec ReactJS, afin d’améliorer vos compétences en gestion de props et en conception d’interfaces réactives.
Exercice et solution
Maintenant, nous allons mettre en application ce que nous venons d’apprendre donc je vous propose de découvrir le projet qu’on va réaliser ensemble.
Sur ce premier exercice, on va manipuler ce qu’on a appris jusqu’à maintenant et je vais vous montrer comme faire. Mais si vous voulez essayer de faire tout seul, essayez et puis après on le fait ensemble.
Donc, l’idée est de créer un composant qui va contenir une section de tableau. Et dans le tableau, il contient trois colonnes avec des en-têtes : Prenom, Nom, Ville, on dirait une liste des personnes. Donc, l’idée est d’avoir un composant enfant qui va afficher les données qui sont dans le tableau en les recevant du props, c’est-à-dire, le composant parent envoie des données au composant enfant et ce dernier les affiche sous forme tableau contenant une liste des objet (ou bien une liste des personnes).
Pour faire cela, on utilise toujours notre dernière application, et on va commencer par la déclaration des bases de l’exercice.
Modifier alors le fichier index.js dans src/index.js comme ce ci :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<section>
<table>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Ville</th>
</tr>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>
</section>
</React.StrictMode>
);
Et maintenant, essayons de mettre un peu de styles notre application : dans le fichier index.css : src/styles/index.css
body {
background-color: #c0392b;
font-family:Arial, Helvetica, sans-serif;
height : 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section{
background-color : #bdc3c7;
padding: 15px;
border-radius: 4px;
}
table {
width: 250px;
}
th{
background-color : #f39c12;
padding: 6px;
}
Bah, voilà ce que vous devez avoir dans votre navigateur si vous exécutez votre application
Créons maintenant le composant fonctionnel.
Notre objectif est de mettre en props les contenus de notre tableau tels que les contenus des balise td. Donc, pour faire cela, couper notre code td dans le fichier index.js et coller le dans notre composant enfant.
Voilà d’abord la modification dans le fichier index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import ClientsList from './component/ClientsList';
let datas = [
{prenom: 'Jean',nom : 'Dubois',ville:'Paris'},
{prenom:'Pierre',nom:'Durand',ville:'Toulouse'},
{prenom:'Emile',nom: 'Dufour',ville:'Bordeaux'}
]
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<section>
<table>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Ville</th>
</tr>
<ClientsList clientData = {datas[0]}/>
<ClientsList clientData = {datas[1]}/>
<ClientsList clientData = {datas[2]}/>
</table>
</section>
</React.StrictMode>
);
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
Créons le fichier ClientsList.js : src/component/ClientsList.js
export default function ClientsList(props){
return(
<tr>
<td>{props.clientData.nom}</td>
<td>{props.clientData.prenom}</td>
<td>{props.clientData.ville}</td>
</tr>
)
}
Voilà, les valeurs des données sont stockées dans le tableau dans le composant parent et on a utilisé la déstructuration pour les envoyer aux composants enfants. ET exécuter maintenant votre application et normalement vous devez avoir comme ceci dans votre navigateur.
Vous avez bien manipulé les props maintenant.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
En réalisant cet exercice, vous avez appris à manipuler les props dans une application ReactJS pour afficher dynamiquement des données sous forme de tableau. Cette approche vous permet de mieux comprendre la communication entre composants, une compétence essentielle pour développer des interfaces réactives et modulaires. N’hésitez pas à explorer d’autres fonctionnalités pour améliorer votre maîtrise de ReactJS et développer des applications plus complexes.
