Comment fonctionne les props React, exemples et explications

Qu’est-ce qu’une props ?

L’idée principale de React est de pouvoir créer des composants réutilisables à souhait, ils peuvent être implémentés n’importe où dans votre application. Pour cela, il faut avoir une vision générique de vos composants. Votre composant va recevoir des Props pour dynamiser le rendu, tout cela en ayant qu’un seul composant.

Vous pouvez voir ci-dessus un exemple très simple d’application en React, composée de plusieurs composants. Il va y avoir un composant pour le listing des utilisateurs ainsi qu’un autre pour afficher une ligne de ce listing.

Premier pas avec les props

Voici le code final de notre petit mockup réalisé juste avant, nous allons le parcourir et expliquer l’ensemble du projet.

• Dans notre fichier principal j’ai importé la librairie Faker, qui permet de retourner du contenu aléatoire; j’aurais pu pousser plus loin la génération de datas, mais je me suis contenté de générer aléatoirement un avatar.

import faker from 'faker'

• J’ai également importé mon composant qui va permettre de générer la liste des utilisateurs.

import UsersList from './components/UsersList'

• Créé un tableau avec des objets, un objet par user respectif

const users = [
  {
    avatar: faker.internet.avatar(),
    name: 'Joe',
    location: 'Lille',
    age: 19,
  },
  {
    avatar: faker.internet.avatar(),
    name: 'Anna',
    location: 'Paris',
    age: 19,
  },
]

• J’ai déclaré mon composant UsersList dans la fonction de retour de mon application. Dans ce composant, j’ai fait passer une props qui se nomme users. Vous allez voir que l’on va pouvoir récupérer cette variable qui contient notre tableau d’objets d’utilisateurs.

• Je viens importer mon composant User qui va retourner une ligne utilisateur avec ses informations.
• Mon composant UsersList récupère mon fameux props via users, attention à bien mettre les deux accolades autour de users car sinon vous n’allez pas récupérer correctement la variable.
• Dans mon composant, je viens faire une boucle via la fonction map de mon tableau users. Il va parcourir les itérations et faire appel au composant user en passant le contenu de ma variable user. La balise key permet d’avoir des composants avec un id unique.

• J’importe ma feuille scss (en ayant au préalable installé le module node-sass).
• Je récupère mon props user de la même façon que dans le composant UsersList.
• Ma première constante permet d’exporter mes variables de ma props user, j’aurais très bien pu utiliser mes variables en y accédant directement avec un user.avatar ou user.age, là j’ai directement accès à la variable dans la suite du code.
• Le retour est classique avec du JSX et variable, comme nous l’avons vu précédemment.