React Proptype Array avec forme

1. Forme PropTypes dans React
2. Conclusion

Coder sur React est un exercice agréable jusqu’à ce que l’on déploie une application et que l’application échoue à cause d’erreurs et de bogues.

Heureusement, nous avons la dépendance proptype de React pour nous renflouer. Les accessoires dans React sont l’abréviation de propriétés, et il existe différents accessoires dans React : nombre, chaînes, booléen, objet, etc.

Ce que fait proptype, c’est qu’il vérifie le type d’accessoires que nous passons dans nos codes pour s’assurer que c’est le bon; quand on en passe une mauvaise, le proptype alerte via la console du navigateur.

Forme PropTypes dans React

Le PropTypes.Shape() offre un niveau plus approfondi de vérification et de validation de type ; il analyse la structure interne d’un tableau à la recherche d’accessoires erronés.

Pour utiliser cette fonctionnalité, nous devons l’installer dans le dossier du projet sur lequel nous travaillons en tapant : npm i prop-types. Lorsque l’installation est terminée, nous passons ensuite à la partie codage.

Regardons un exemple qui montre le PropTypes.shape() en action.

Dans le dossier src, nous allons créer un nouveau fichier, le nommer Component.js, naviguer jusqu’au fichier et importer les proptypes, comme indiqué ci-dessous.

Extrait de code - Component.js :

import PropTypes from 'prop-types'

function Component() {
  return null
}

Component.propTypes = {
  person: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  })
}

export default Component;

Puisque nous voulons que les proptypes vérifient la chaîne et le nombre de props de la date que nous voulons rendre dans le App.js, nous enveloppons les composants name et age dans le PropTypes.shape.

Ensuite, nous naviguons vers le fichier App.js et importons le fichier Component.js comme ci-dessous.

Extrait de code - App.js:

import Component from './Component'

function App() {
  return < Component person = {
    {
      name: 'Kyle', age: '26'
    }
  } />
}

export default App

Production:

Si nous ouvrons la console du navigateur, nous voyons l’erreur dans la capture d’écran ci-jointe car la prop age est transmise sous forme de chaîne au lieu d’un nombre. Une fois cette anomalie corrigée, le journal des erreurs disparaît.

C’est ce qu’il y a de génial à utiliser la dépendance proptype.

Conclusion

L’efficacité des PropTypes ne peut être surestimée car elle est idéale pour détecter les erreurs et les bugs sur place. Cela nous aide à écrire des codes plus précis et bien structurés.