# 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


```js
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.


```js
<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](https://codesandbox.io/s/initial-code-9oc42)

Preview: [https://9oc42.csb.app/](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:


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

is same as the below code:


```js
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


```js
<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](https://codesandbox.io/s/top-or-bottom-p5zyz)

Preview: [https://p5zyz.csb.app/](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.


```js
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:


```js
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:


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


Demo: [https://codesandbox.io/s/disable-menu-ktj6n](https://codesandbox.io/s/disable-menu-ktj6n)

Preview: [https://ktj6n.csb.app/](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.

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)

**Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox [here](https://yogeshchavan.dev/).**