React Proptype Array avec forme

PropTypes.arrayOf(PropTypes.shape(...)) décrit un tableau dont les éléments sont des objets comportant des champs précis. Le package prop-types vérifie ce contrat du composant en développement et peut émettre un avertissement lorsque les props fournies ne le respectent pas.

Ce que PropTypes valide

PropTypes déclare les types et la structure des objets qu’un composant attend. Cela aide à documenter l’interface du composant et à repérer les incompatibilités pendant le développement. Ces vérifications produisent des avertissements dans la console ; elles n’empêchent pas le rendu du composant et ne valident pas les données en production.

Valider un tableau d’objets avec PropTypes

Installez le package prop-types dans votre projet React. Dans le module du composant, importez-le avec import PropTypes from 'prop-types', puis déclarez items: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string.isRequired, value: PropTypes.number.isRequired })).isRequired. La forme de l’objet est ainsi appliquée à chaque élément. Le petit exemple JavaScript ci-dessous montre les mêmes données transmises à un composant qui affiche une liste ; il fonctionne de façon autonome, tandis que la déclaration PropTypes appartient au module du composant React.

const items = [
  { name: 'Ada', value: 7 },
  { name: 'Lin', value: 9 },
];

function renderItems(items) {
  return `<ul>${items.map((item) => `<li>${item.name}: ${item.value}</li>`).join('')}</ul>`;
}

console.log(renderItems(items));

<ul><li>Ada: 7</li><li>Lin: 9</li></ul>

Dans le composant React, utilisez la prop items avec ce même tableau et affichez chaque entrée avec items.map(...) ; attribuez une key stable à chaque élément rendu. Les valeurs de l’exemple correspondent aux champs déclarés : la liste affiche donc le contenu attendu.

Rendre les champs obligatoires et comprendre les avertissements

Dans la déclaration, .isRequired appliqué à items signifie que la prop doit être fournie. Le même modificateur sur name et value indique que chaque objet est censé contenir ces champs avec les types déclarés. Retirez .isRequired d’un champ s’il peut être omis ; les autres champs déclarés restent vérifiés. Un objet contenant value: '7' au lieu d’un nombre ne respecte pas la forme : les vérifications de React en développement affichent alors un avertissement dans la console. Cet avertissement ne convertit pas la chaîne, ne rejette pas la prop et n’empêche pas le rendu. Si votre application en dépend, validez séparément les données externes ou celles utilisées en production.

FAQ

PropTypes valide-t-il chaque élément d’un tableau ?

Oui. PropTypes.arrayOf applique son validateur à chaque élément. Combiné à PropTypes.shape, il vérifie les champs indiqués dans chaque objet.

PropTypes.shape valide-t-il un tableau à lui seul ?

Non. PropTypes.shape décrit les champs d’un seul objet. Pour un tableau d’objets, utilisez PropTypes.arrayOf(PropTypes.shape(...)).

PropTypes est-il obligatoire dans React ?

Non. Il s’agit de vérifications d’exécution facultatives qui peuvent documenter les props et signaler des problèmes pendant le développement. Elles ne remplacent ni le typage statique ni la validation des données aux frontières de l’application.