Validando datos a través de PropType en React

Validando datos a través de PropType en React
Juan Carlos G2020-08-04

Hola viajero, vamos avanzando cada vez más en este Curso gratis de React JS y te aseguro que aun nos falta mucho por ver, no obstante, hoy me voy a enfocar a enseñarte el uso de PropTypes, y esto con la intención de que puedas validar y comprobar que las propiedades de tus componentes se asignen correctamente.

  • Como siempre te dejo el vídeo anterior Children en React JS, para que no te pierdas ningún capítulo de este curso.

Si te han gustado mis tutoriales puedes apoyarme con tan solo compartir este post en tus redes.

 

📌 Suscríbete a mi canal y activa la campanita para que no te pierdas ningún video 🤘

 

¿Qué aprenderás de las PropTypes?

  • Importarlas a nuestro proyecto
  • Cómo validar las Props de tu componente
  • Tipos de validadores
  • Crear una validación personalizada

 

Repositorio:

  • Puedes acceder al código descargándolo aquí.
  • O clona el repositorio y cambia a la rama proptypes
git clone https://github.com/EWebik/react-js.git
git checkout proptypes

 

¿Qué son las PropTypes en React?

Las PropType en React son una forma en la que podemos validar las propiedades en nuestros componentes.

Desde la versión 15.5 de React, las PropTypes fueron movidas a un paquete diferente, por lo tanto, al usar el comando CLI create-react-app, se instalan y puedes hacer uso de ellas, de lo contrario tendrás que agregarlas a tu proyecto.

 

Instalación de PropType

npm install prop-types

 

¿Para qué sirven las PropTypes?

Este tipo de elementos son una serie de validadores que podemos utilizar para garantizar que la información recibida en las propiedades de nuestros componentes sea valida.

 

Ejemplo de uso de las PropTypes

Bien, una vez que ya hemos instalado el paquete, podemos importarlas a nuestro proyecto tal y como se ve en el siguiente ejemplo.

import PropTypes from 'prop-types';

Ahora ya podemos hacer uso de ellas y lo podemos hacer de dos formas:

  • Dentro del componente como datos estáticos
  • O desde afuera del componente, accediendo al atributo estático propTypes.

 

Creando PropTypes desde fuera del componente

Supongamos que tenemos el siguiente componente.

class Componente extends React.Component {
  render() {
    return (
      <>
        <p>{this.props.texto}</p>
        <p>{this.props.numero}</p>
        <p>{this.props.correo}</p>
      </>
    );
  }
}

Donde tenemos la propiedad title, dicha propiedad es un string, por lo tanto, solo debería recibir texto y dado que es el titulo, siempre debería ser pasado cuando se llama al componente.

Para poder hacer esto, utilizamos las PropTypes y lo haremos de la siguiente manera.

Componente.propTypes = {
  texto: PropTypes.string,
  numero: PropTypes.number.isRequired,
  correo: function(props, propName, componentName) {
    if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(props[propName])) {
      return new Error(
        'Prop no valida `' + propName + '` Para ' +
        ' `' + componentName + '`. Error en la validación.'
      );
    }
  },
}

Es aquí donde tenemos toda la magia:

  1. En primer lugar, es un JSON con el nombre de cada propiedad que necesitamos.
  2. Utilizamos el parámetro PropTypes.
  3. Y a través de notación de punto agregamos el tipo que deseamos validar.
  4. Podemos utilizar isRequired para indicar que la propiedad es obligatoria.
  5. Incluso podemos crear una validación personalizada a través de una función, por ejemplo.

 

PropTypes personalizadas

Para el caso de la propiedad correo, he declarado una función donde hacemos la validación del formato correo y mandará un error en la consola si se ingresa un formato no valido.

 

correo: function(props, propName, componentName) {
    if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(props[propName])) {
      return new Error(
        'Prop no cuenta con un formato de correo `' + propName + '` Para ' +
        ' `' + componentName + '`. Error en la validación.'
      );
    }
  },

 

Nuestro código completo se vería así.


import PropTypes from 'prop-types';

//PropTypes en React JS
class Componente extends React.Component{
  render(){
    return(
      <>
        <p>{this.props.texto}</p>
        <p>{this.props.numero}</p>
        <p>{this.props.correo}</p>
      </>
    )
  }
}

Componente.propTypes = {
  texto: PropTypes.string,
  numero: PropTypes.number.isRequired,
  correo: function(props, propName, componentName) {
    if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(props[propName])) {
      return new Error(
        'Prop no cuenta con un formato de correo `' + propName + '` Para ' +
        ' `' + componentName + '`. Error en la validación.'
      );
    }
  },
}

ReactDOM.render(
  <Componente
    texto={"texto"}
    numero={5}
    correo={"correo@ewebik.com.mx"}/>,
  document.getElementById('root')
);

 

PropTypes en functional components

También podemos utilizar las PropTypes en componentes funcionales y lo hacemos de una forma similar, como en el siguiente ejemplo:

//Componentes funcionales
const Componente = props =>{
  return(
    <>
      <p>{props.texto}</p>
      <p>{props.numero}</p>
      <p>{props.correo}</p>
    </>
  )
}


Componente.propTypes = {
  texto: PropTypes.string,
  numero: PropTypes.number.isRequired,
  correo: function(props, propName, componentName){
    if(!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(props[propName])){
      return new Error(
        `Prop no cuenta con un formato de correo ${propName}, para ${componentName}. Error en la validación.`
      )
    }
  }
}

 

Establecer valores por default con PropTypes

Otra caracterísitca que podemos agregar a nuestros componentes utilizando las PropTypes, es establecer valores por defectos a las propiedades de un componente, esto hará que si no pasan nada en la propiedad, en automático se pintará este valor por defecto.

Para ello debemos utilizar defaultProps.

//Valores por default
Componente.defaultProps ={
  texto:"EWebik default",
  numero:10,
  correo:"contacto@ewebik.com.mx"
}

 

Creando PropTypes dentro del componente

Una segunda forma de crear nuestras PropTypes es agregarlas dentro de nuestro componente, pero te adelanto que esto solo sirve para componentes de clase, por tal razón, en el apartado anterior te mostré el método que sirve para componentes de clase y funcionales, pero nunca esta demás saber este segundo método.

//Componentes de clase
class Componente extends React.Component{
  static propTypes = {
    texto: PropTypes.string,
    numero: PropTypes.number.isRequired,
    correo: function(props, propName, componentName){
      if(!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(props[propName])){
        return new Error(
          `Prop no cuenta con un formato de correo ${propName}, para ${componentName}. Error en la validación.`
        )
      }
    }
  }

 static defaultProps ={
  texto:"EWebik default",
  numero:10,
  correo:"contacto@ewebik.com.mx"
}
  render(){
    return(
      <>
        <p>{this.props.texto}</p>
        <p>{this.props.numero}</p>
        <p>{this.props.correo}</p>
      </>
    )
  }
}

Como puedes observar la sintaxis es prácticamente la misma solo debemos intercambiar la notación de punto por la palabra reservada static.

 

Compendio de validadores de las PropTypes

Bien, no solo puedes validar string o números, existe una gran variedad de validadores disponibles por la librería de React, los cuales te dejo a continuación, no obstante, también te dejo el link de la documentación oficial para que la revises si lo necesitas.

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // Puedes declarar que una propiedad es un tipo específico de JS. Por defecto, estas
  // son todas opcionales.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // Cualquier cosa que sea interpretada: números, cadenas, elementos o un array
  // (o fragment) que contengan estos tipos.
  optionalNode: PropTypes.node,

  // Un elemento de React
  optionalElement: PropTypes.element,

  // Un tipo de elemento React (ej. MyComponent).
  optionalElementType: PropTypes.elementType,

  // Además puedes declarar que una prop es una instancia de una clase. Este usa
  // el operador instanceof de JS.
  optionalMessage: PropTypes.instanceOf(Message),

  // Puedes asegurar que una prop esta limitada a valores específicos si se
  // considera como enum.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // Un objeto que puede ser de diferentes tipos
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // Un array de determinado tipo
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // Un objeto con valores de propiedad de determinado tipo
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // Un objeto que tenga determinada estructura
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  
  // Un objeto con advertencias sobre propiedades adicionales
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),   

  // Puedes encadenar cualquiera de los anteriores con `isRequired` para asegurar
  // que se muestre una advertencia si la prop no se suministra.
  requiredFunc: PropTypes.func.isRequired,

  // Un valor de cualquier tipo
  requiredAny: PropTypes.any.isRequired,

  // También puedes suministrar un validador personalizado. Debe retornar un objeto Error
  // si la validación falla. No uses `console.warn` o throw, porque no va a funcionar en
  // `oneOfType`
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // También puedes suministrar un validador personalizado a `arrayOf` y `objectOf`.
  // Debe retornar un objeto Error si la validación falla. El validador se llamará
  // por cada key en el array o el objeto. Los primeros dos arguments del validador
  // son el array o el objeto, y la key del elemento actual.
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

 

Excelente, espero que te haya gustado mucho esta clase y hayas aprendido algo nuevo, no olvides visitar las otras clases de este curso y me ayudes compartiendo y con tu suscripción a mi canal.

 


Juan Carlos G

Electrónica y diseño web

Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como Node JS, PHP, C# y Bases de datos, si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.

Puedes seguirme en mis redes