PropType en React.js: ¬ŅC√≥mo validar datos a trav√©s de PropType en React.js?

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.

Juan Carlos García
by Juan Carlos García24-Ag-20222

¬Ņ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.

Suscribirme

Gracias por tu calificación:

2

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ

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"
}

 

Suscribirme

Gracias por tu calificación:

2

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ

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"
}
  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.

Suscribirme

Gracias por tu calificación:

2

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ

ūüßź Autoevaluaci√≥n: PropTypes en React

1 ¬ŅQu√© son las PropType en React?

2 ¬ŅPodemos establecer valores por default a nuestras PropType?

Juan Carlos García

Juan Carlos García

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.

Desarrollador de software

© 2022 EWebik

Dise√Īo de p√°ginas web y aplicaciones moviles.