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} />

https://gist.github.com/myogeshchavan97/cfe02f9b162be2d1ff2490558a96cb45

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:

https://gist.github.com/myogeshchavan97/d497537ca5ce181e001b5da93c1e825d

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

https://gist.github.com/myogeshchavan97/b1a63410ba0d877d4ef28c57aced9876

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.

How using props makes React App powerful and more flexible

Comments

More from this blog

How to Build a Task Management App Using Next.js 16 and Prisma 7

React's/Next.js Worst Week Ever! Just Got Worse

React Performance Anti-Patterns: 5 Mistakes That Kill Your App's Speed!

How to Access Both Company and Personal GitHub Repositories On The Same Machine

How to Build Multi-Language React Apps with Internationalization (i18n)

Let’s get started

Command Palette

Comments

More from this blog

Let’s get started