React Proptype Array Con Forma

1. Forma PropTypes en React
2. Conclusión

Codificar en React es un ejercicio agradable hasta que uno implementa una aplicación y la aplicación falla debido a errores y fallas.

Afortunadamente, tenemos la dependencia proptype de React para rescatarnos. Los accesorios en React son la abreviatura de propiedades, y hay diferentes accesorios en React: número, cadenas, booleano, objeto, etc.

Lo que hace proptype es que comprueba el tipo de accesorios que estamos pasando en nuestros códigos para asegurarse de que es el correcto; cuando pasamos uno equivocado, el proptype alerta a través de la consola del navegador.

Forma PropTypes en React

El PropTypes.Shape() ofrece un nivel más profundo de verificación y validación de tipos; escanea a través de la estructura interna de un array en busca de accesorios incorrectos.

Para usar esta función, debemos instalarla dentro de la carpeta del proyecto en el que estamos trabajando escribiendo: npm i prop-types. Cuando finaliza la instalación, pasamos a la parte de codificación.

Veamos un ejemplo que muestra PropTypes.shape() en acción.

Dentro de la carpeta src, crearemos un nuevo archivo, lo llamaremos Component.js, navegaremos hasta el archivo e importaremos los proptypes, como se ve a continuación.

Fragmento de código - 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;

Dado que queremos que los proptypes comprueben la cadena y los accesorios numéricos de la fecha que queremos representar en App.js, envolvemos los componentes name y age dentro de PropTypes.shape.

A continuación, navegamos al archivo App.js e importamos el archivo Component.js como se muestra a continuación.

Fragmento de código - App.js:

import Component from './Component'

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

export default App

Producción:

Si abrimos la consola del navegador, vemos el error en la captura de pantalla adjunta porque el prop age se pasa como una cadena en lugar de un número. Una vez que se corrige esta anomalía, el registro de errores desaparece.

Esta es la genialidad de utilizar la dependencia proptype.

Conclusión

La eficacia de los PropTypes no se puede subestimar porque es excelente para detectar errores y fallas en el acto. Nos ayuda a escribir códigos más precisos y bien estructurados.