Rajat Gupta
Rajat's Blog

Rajat's Blog

What the heck are props in react

Rajat Gupta's photo
Rajat Gupta
ยทFeb 25, 2022ยท

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Although we can make web apps using JavaScript. One of the reasons we are using react over JS is component reusability.

What is component reusability: make a component once and use it again and again for different websites (or projects). for example, we can make a navigation bar once and can reuse it for our blogging website, e-commerce website, social media app etc.

props help us to do just that โ˜๏ธ.

In this blog, we'll understand how prop works by

  1. first making a Navbar component in Navbar.js.
  2. then Importing it in App.js

(Import-Export is quite straightforward but if you don't know how it works click here.)

(I will be making the nav component from my own component library, check it out here: parts-builder.netlify.app).

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar/>
    </div>
  );
}
//Navigation.js

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

export default function App() {

  return (
    <div className="App">
      <nav className="navigation-container">
        <h2><a className="nav-logo" href="/">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">Services</a></span>
        </div>
      </nav>
    </div>
  );
}

1.PNG

Now, let's I wanna make a website which sells books (I'll name it "Kitab") and wanna reuse the above navbar component.
Sure, I can do that, what's the harm

Only 2 problems:

  1. I wanna use my own logo.
  2. I wanna give an option to login instead of services.

Here comes our superhero prop to enable us to do just that.

Let's change the logo first:

//App.js

import Navbar from './Navbar';

export default function App() {

  return (
    <div className="App">
      <Navbar logo="Kitab"/>
    </div>
  );
}
//Navigation.js

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

export default function App(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">Services</a></span>
        </div>
      </nav>
    </div>
  );
}

2.PNG

Hell yaa! we did it.

but what changed: 3 things

  1. See this "Navbar logo="Kitab"/" in App.js
  2. "props" given as parameter in Navigation.js
  3. Instead of the word "logo" we used {props.logo} in Navigation.js

Similarly, let's replace the "services" link with the "login" link.

//App.js

import Navbar from './Navbar';

export default function App() {

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

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

export default function App(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 I hope you understood how props enable us to reuse the same component again and again.

Note that instead of a string, I could have passed an object, a link, an array, or anything else for that matter.

Now, that you have understood what prop is, you should know what PropTypes are and how they work. To know this read my blog about PropTypes here: rajatgupta.net/proptypes-in-react.

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: linkedin.com/in/therajatg

Have an awesome day ahead ๐Ÿ˜€!

ย 
Share this