What the heck are props in react

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: https://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>
  );
}

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>
  );
}

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>
  );
}

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 next blog here (will publish tomorrow).

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 😀!