How using props makes React App powerful and more flexible

In this article, we will see how to make React Apps more flexible by passing props.

Let’s get started

Suppose, we have an array of objects and each object contains label and content to display

const data = [
  { label: 'Home', content: <HomePage /> },
  { label: 'Contact', content: <ContactPage /> },
  { label: 'About', content: <AboutPage /> }
];

and we have a Main component that accepts that array and it will display the navigation and content based on that data.

<Main data={data} />

As you can see we have renderNav and renderContent functions to display the data and based on which navigation menu is clicked we are showing the content related to that menu.

Demo: https://codesandbox.io/s/initial-code-9oc42

Preview: https://9oc42.csb.app/

---

Now, what if we want to display the navigation at the bottom of page instead of top.

How can we do that?

We can pass a prop to identify top or bottom and based on that prop value, we can display the navigation.

In React, this code:

render() {
  return (
    <div>
      <div>Header</div>
      <div>Content</div>
    </div>
  );
}

is same as the below code:

render() {
  return [ <div>Header</div>, <div>Content</div> ];
}

So we can group the JSX inside an array and react will display that.

We can use the same technique here, to display the navigation at the top or bottom of the page.

In Main.js, we can change the render method code as below:

and for the Main component, we can pass the prop as

<Main data={data} showOnTop={true} />

This will display the navigation on top and If we pass the showOnTop as false, the navigation will be displayed at the bottom.

Demo: https://codesandbox.io/s/top-or-bottom-p5zyz

Preview: https://p5zyz.csb.app/

---

Now, what If we want to disable any navigation so it can only be accessed by a premium user. We can implement that too.

Let’s say we have another navigation menu option showing Downloads page.

const data = [
  { label: 'Home', content: <HomePage /> },
  { label: 'Contact', content: <ContactPage /> },
  { label: 'Downloads', content: <DownloadsPage /> },
  { label: 'About', content: <AboutPage /> }
];

Then we can have the render method as shown below:

render() {
  const isPremiumUser = true;

  return (
    <Main
      data={data}
      showOnTop={true}
      menuToDisable={isPremiumUser ? 'Downloads' : ''}
    />
  );
}

and inside the Main component, we can use the menuToDisable prop

Here, returning null from onClick handler is equivalent to not adding any event handler. So now, by just changing the menuToDisable value we can disable any navigation menu.

So to disable the About page we can write code like this:

<Main 
 data={data} 
 showOnTop={true} 
 menuToDisable={!isPremiumUser ? 'About' : ''} 
/>

Demo: https://codesandbox.io/s/disable-menu-ktj6n

Preview: https://ktj6n.csb.app/

That’s it for today. I hope you learned something new.

I hope you've been enjoying my articles and tutorials I've been writing. If you found them useful, consider buying me a coffee! I would really appreciate it.

Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.