Type Checking using PropTypes in React

Type Checking using PropTypes in React

Type Checking using PropTypes in React. PropTyping allows us to bring type checking to props, so this is the data passed down from the parent component to the child component. TypeChecking with prop-types is a quick and easy way to check if you’ve any errors in your data or if it’s running properly.

PropTyping allows us to bring type checking to props, so this is the data passed down from the parent component to the child component. This makes debugging our react application much easier. For the purpose of this article, I will a simple book application as an example.

How does it work?

To get started, create a simple react app and install the proptypes package, npm install --save prop-types. Now if you check the package.json file you should have an entry of prop types. Next, import proptypes into our component file.

import React, { Component } from 'react';
import PropTypes from "prop-types"

class BookDetail extends React.Component {
  render() {
    return (
      <h1>{this.props.book}</h1>
    );
  }
}

Here is the book data we will use as an example.

export const storeProducts = [
{
    id: 5,
    title: "Behold the Dreamers (Oprah's Book Club)",
    img: "img/BeholdtheDreamers-5.png",
    price: 24,
    author: "Imbolo Mbue",
    info:
      "Jende Jonga, a Cameroonian immigrant living in Harlem, has come to the United States to provide a better life for himself, his wife, Neni, and their six-year-old son. In the fall of 2007, Jende can hardly believe his luck when he lands a job as a chauffeur for Clark Edwards, a senior executive at Lehman Brothers. Clark demands punctuality, discretion, and loyalty—and Jende is eager to please. Clark’s wife, Cindy, even offers Neni temporary work at the Edwardses’ summer home in the Hamptons. With these opportunities, Jende and Neni can at last gain a foothold in America and imagine a brighter future...",
    inCart: false,
    count: 0,
    total: 0
  }
]

Now explore the possibility that there is something wrong with the data. Let’s say you, somebody in the team, or somebody who was working on the project previously messes up the API by assigning the price to a boolean value and the inCart to an integer. These can cause us tons of bugs in our application.

export const storeProducts = [
{
    id: 5,
    title: "Behold the Dreamers (Oprah's Book Club)",
    img: "img/BeholdtheDreamers-5.png",
    price: true,
    author: "Imbolo Mbue",
    info:
      "Jende Jonga, a Cameroonian immigrant living in Harlem, has come to the United States to provide a better life for himself, his wife, Neni, and their six-year-old son. In the fall of 2007, Jende can hardly believe his luck when he lands a job as a chauffeur for Clark Edwards, a senior executive at Lehman Brothers. Clark demands punctuality, discretion, and loyalty—and Jende is eager to please. Clark’s wife, Cindy, even offers Neni temporary work at the Edwardses’ summer home in the Hamptons. With these opportunities, Jende and Neni can at last gain a foothold in America and imagine a brighter future...",
    inCart: "24",
    count: 0,
    total: 0
  }
]

This is where typechecking comes in. We have a BookDetail component, which is our child component. We want to type check the props that are being sent from the parent component to our child component. First, we will attach a special property to BookDetail. Call propTypes on the name of the component and set it equal to an object. From here we can assign what we need to validate. In this case, we’ve book as our prop, using the shape method to allow objects to take a particular shape. Within the shape method, we will assign what we expect our object properties to be, which are id, img, title, price, and inCart.

class BookDetail extends React.Component {
  render() {
    return (
      <h1>{this.props.book}</h1>
    );
  }
}
// Typechecking using PropType
BookDetail.propTypes = {
  book: PropTypes.shape({
    //here the PropType is looking for a number    
    id: PropTypes.number,
    //the PropType is looking for an string
    img: PropTypes.string,
    title: PropTypes.string,
    price: PropTypes.number,
    //here the PropType is looking for a boolean
    inCart: PropTypes.bool
  }).isRequired
}

react javascript programming testing developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

A Short Guide to React Native App Development

React Native is undoubtedly one of the most widely used cross-platform frameworks for creating native-like apps. This framework can be easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.