Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 27, 2022 08:08 am GMT

PropTypes in react (JS)

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

As your app grows, you can catch a lot of bugs with typechecking. React has some built-in typechecking abilities. To run typechecking 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 validators2. Default prop values3. 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: https://rajatgupta.net/what-the-heck-are-props-in-react.

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

//App.jsimport Navbar from './Navbar';export default function App() {  return (    <div className="App">      <Navbar logo="Kitab" anyName="login"/>    </div>  );}
//Navbar.jsimport 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>  );}

3.PNG
In the above example, we have imported the navbar component in our App.js and changed 2 variables (logo and anyName) in the navbar component with the help of props.

1. props with different validators:

In the below code I have included PropTypes, have a quick glance at the below code and move on to what I have to say immediately following it.

//Navbar.jsimport React from "react";import PropTypes from 'prop-types'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>  );}Navbar.propTypes = {logo: PropTypes.string}

In the above code for Navbar.js we have done 2 changes:

  1. Includedimport PropTypes from 'prop-types'in order to use PropTypes.
  2. IncludedNavbar.propTypes = {logo: PropTypes.string}so that whatever the logo we define in App.js will always be a string type.

Therefore, instead of (logo="Kitab"), if I do (logo=9) in App.js, it will result in an error (see the error in chrome console)

import Navbar from './Navbar';export default function App() {  return (    <div className="App">      <Navbar logo={9} anyName="login"/>    </div>  );}

2.PNG
Read the error

prop type can be a string (PropTypes.string), number (PropTypes.number), boolean (PropTypes.bool), function (PropTypes.func), object ( PropTypes.object) or array (PropTypes.array).

Now you may think that why all this typechecking, I'll take care and will send only string but you are saying this now, however, as your program will grow in size and compexity you may send an object and at that time the problem will be very hard to detect.

2. Default prop values

Let's shoot directly to the example:

//Navbar.jsimport React from "react";import PropTypes from 'prop-types'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>  );}Navbar.propTypes = {logo: PropTypes.string}Navbar.defaultProps = {  logo: "Enter logo",  anyText: "3rd link"}

In the above code we have added

Navbar.defaultProps = {  logo: "Enter logo",  anyName: "3rd link"}


at the bottom.
3.PNG
Hmmm... I could not see any changes happening. This is because we have given defaultProps in Navbar.js and default props will only be effective when we forget to pass any value to props (In this case we have already passed values to logo and anyName in App.js).

Let's remove the values passed and see what happens:

import Navbar from './Navbar';export default function App() {  return (    <div className="App">      <Navbar/>    </div>  );}

You can see below that the default values are now effective.
3.PNG

Hence, whenever I forget to pass values, the browser will assign default values.

3. isRequired

When we assign isRequired to a prop that prop must be assigned a value, otherwise we'll get an error.

Now, let's see the below example to understand how isRequired works.

//Navbar.jsimport React from "react";import PropTypes from 'prop-types'import './App.css'export default function Navbar(props) {  return (    <div className="App">      <nav className="navigation-container">        <h2><a className="nav-logo" href="https://github.com/therajatg/parts">{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>  );}Navbar.propTypes = {logo: PropTypes.string.isRequired,                    anyName: PropTypes.isRequired};Navbar.defaultProps = {  logo: "Enter logo",  anyName: "3rd link"}

3.PNG

Hmmmmm.... nothing happened. This is because we have already passed default props. Hence, the value has already been passed to the props.

Let's remove the default props and see what happens:

//Navbar.jsimport React from "react";import PropTypes from 'prop-types'import './App.css'export default function Navbar(props) {  return (    <div className="App">      <nav className="navigation-container">        <h2><a className="nav-logo" href="https://github.com/therajatg/parts">{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>  );}Navbar.propTypes = {logo: PropTypes.string.isRequired,                    anyName: PropTypes.isRequired};

5.PNG
4.PNG

See the error.

Hence, if you think some prop value is important to assign use isRequired for that prop.

I recommend you to use Default prop values and props with isRequired frequently in order to avoid any issues in your code (when it becomes complex).

Now I think I have fulfilled my promise and you understand props with different validators, Default prop values, props with isRequired. If you don't tell me in the comments section and I'll try to explain it again (by editing).

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

*Have an awesome day ahead !


Original Link: https://dev.to/therajatg/proptypes-in-react-js-i17

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To