Array React PropType con forma

En este artículo, aprenderemos cómo usar la array React PropType con forma. Usamos React PropTypes para verificar tipos de variables en react. Hace que la depuración sea mucho más fácil y rápida. Entendámoslo mientras lo usamos como proyecto.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app app-11

Paso 2: después de crear la carpeta de su proyecto, es decir, app-11, muévase a ella con el siguiente comando:

cd app-11

Paso 3: Ejecute el servidor de desarrollo:

npm start

Estructura del proyecto: Se verá así.

Ejemplo: Anote el siguiente código en los archivos respectivos.

Nombre de archivo: App.js: aquí estamos creando un componente funcional con algunos datos ficticios, estos datos pueden provenir de cualquier base de datos o una API.

import "./App.css";
import Courses from "./Components/Courses";
  
function App() {
  let geekCourses = [
    {
      title: "App development with Java and Kotlin",
      price: 10000,
      duration: 5,
      mentor: "Aman Negi",
      TA: "Rahul Negi",
      classesPerWeek: 5,
    },
    {
      title: "Web development Nodejs",
      price: 9000,
      duration: 4,
      mentor: "Riya Rawat",
      TA: "Mihir Rawat",
      classesPerWeek: 4,
    },
    {
      title: "MERN stack ",
      price: 12000,
      duration: 6,
      mentor: "Kartik Sayana",
      TA: "Amogh Sayana",
      classesPerWeek: 6,
    },
    {
      title: "Machine Learning with python",
      price: 10000,
      duration: 6,
      mentor: "Rohit Jain",
      TA: "Utkarsh Jain",
      classesPerWeek: "5",
    },
  ];
  return (
    <div className="App">
      <Courses geekCourses={geekCourses} />
    </div>
  );
}
  
export default App;

Nombre de archivo: Courses.js: aquí creamos un componente funcional y aceptamos un accesorio geekCourses del componente principal y agregamos algunos estilos básicos.

import React from "react";
import PropTypes from "prop-types";
  
const Courses = ({ geekCourses }) => {
  let displayCourses = geekCourses.map((course, idx) => {
    return (
      <div
        key={idx}
        style={{
          border: "2px solid rgb(91, 222, 115)",
          margin: "5px",
          width: "30vw",
          borderRadius: "10px",
          boxShadow: "5px 3px 11px -1px rgba(0,0,0,0.46)",
          padding: "5px",
        }}
      >
        <h3> {course.title} </h3>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <span style={{ margin: "5px" }}>
            <strong>Duration:</strong> {course.duration} days
          </span>
  
          <span style={{ margin: "5px" }}>
            <strong>Price:</strong> {course.price} Rs
          </span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <span style={{ margin: "5px" }}>
            <strong>Mentor:</strong> {course.mentor}
          </span>
  
          <span style={{ margin: "5px" }}>
            <strong>TA:</strong> {course.TA}
          </span>
        </div>
      </div>
    );
  });
  return (
    <div>
      Geeks Courses
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          padding: "5px",
          justifyContent: "center",
        }}
      >
        {displayCourses}
      </div>
    </div>
  );
};
  
Courses.propTypes = {
  geekCourses: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string.isRequired,
      price: PropTypes.number.isRequired,
      duration: PropTypes.number.isRequired,
      mentor: PropTypes.string.isRequired,
      TA: PropTypes.string.isRequired,
      classesPerWeek: PropTypes.number.isRequired,
    })
  ).isRequired,
};
  
export default Courses;

Salida: aquí está la salida cuando no hay ningún error en ningún objeto de la array.

Salida cuando no hay error de tipo

Salida: Supongamos que el desarrollador comete el siguiente error al codificar (es decir, en lugar de escribir un número, lo escribe como una string). Entonces, la aplicación reaccionar nos da una advertencia en la consola.

Salida cuando hay un error de tipo

Explicación: Dado que queremos validar el tipo de geekCourses para que sea una array de objetos, usamos la propiedad PropTypes.arrayOf . También queremos especificar las propiedades del objeto de los elementos en la array geekCoures, entonces tenemos que usar PropTypes.shape dentro de la propiedad arrayOf . También podemos agregar la propiedad isRequired para hacer que la propiedad del objeto individual esté presente en el objeto, generará una advertencia si esa propiedad no está presente en el objeto.