In this article we will learn how to use React PropType array with shape. We use React PropTypes for type checking of variables in react. It makes debugging much easier and quicker. Lets understand it while using it a project.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app app-11
Step 2: After creating your project folder i.e. app-11, move to it using the following command:
cd app-11
Step 3: Run the development server:
npm start
Project structure: It will look like this.
Example: Write down the following code in respective files.
Filename: App.js: Here we are creating a functional component with some dummy data, this data can be coming from any database or an API.
App.js
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; |
Filename : Courses.js: Here we created a functional component and accepting a prop geekCourses from parent component and adding some basic styles.
Courses.js
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; |
Output: Here is the output when there is no error in any object in the array.
Output when no type error
Output: Lets assume that the developer makes the following mistake while coding (i.e. instead of writing a number he writes it as string). So the react app then gives us a warning in console.
Output when there is a type error
Explanation: Since we want to validate the type of geekCourses to be an array of objects so we use PropTypes.arrayOf property. Also we want to specify the object properties of the elements in the geekCoures array then we have to use PropTypes.shape inside the arrayOf property. We can also add isRequired property to make the individual object property to be present in the object, it will raise a warning if that property is not present in the object.
