PropTypes in react

Let's see what?reactjs.org ?has to say:

As your app grows, you can catch a lot of bugs with type-checking. React has some built-in type checking abilities. To run type checking on the props for a component, you can assign the special propTypes property:

Here we'll see 3 main propTypes properties and I promise you'll understand:

1. props with different validators
2. Default prop values
3. props with isRequired        

Since you are here I guess you have a basic idea about props, if you don't first read my previous blog here:?rajatgupta.net/what-the-heck-are-props-in-r.. .

We'll understand PropTypes with the help of the navbar component. See below:

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar logo="Kitab" anyName="login"/>
    </div>
  );
}        

//Navbar.js

import React from "react";
import './App.css'

export default function Navbar(props) {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">{props.logo}</a></h2>
        <div className="nav-links">
          <span><a href="/" className="nav-home">Home</a></span><span><a href="/" className="nav-about">About</a></span><span><a href="/" className="nav-services">{props.anyName}</a></span>
        </div>
      </nav>
    </div>
  );
}        

[Click to continue reading...]