# Things You Might Not Know About React Components

When working with React, we usually return a JSX from a component.

But apart from returning a JSX, we can also return a string or a number or an array from a 
component?

So, all the following examples are valid in React.

## Return a string From A Component

```js
const SimpleComponent = () => {
  return "This is awesome!";
}
```

## Return a number From A Component

```js
const SimpleComponent = () => {
  return 50;
}
```

## Return an Array From A Component

```js
const SimpleComponent = () => {
  return [10, 20, 30, 40];
}


OR

const SimpleComponent = () => {
  return [<li key="first">First Item</li>, <li key="second">Second Item</li>];
}
```

Returning array from component is very useful to make the component flexible as shown below:

```js
const App = () => {
  const renderNav = () => {
    return (
      <div className="links">
        <a href="/#" className="link">
          Home
        </a>
        <a href="/#" className="link">
          About
        </a>
        <a href="/#" className="link">
          Contact
        </a>
      </div>
    );
  };

  const renderContent = () => {
    return (
      <div className="content">
        <p>This is some content</p>
      </div>
    );
  };

  const nav = <header key="nav">{renderNav()}</header>;
  const content = <main key="content">{renderContent()}</main>;

  const showOnTop = true;

  return (
    <React.Fragment>
      {showOnTop ? [nav, content] : [content, nav]}
    </React.Fragment>
  );
};
```

![flexible.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1627715989628/Hi-RkxgnA.gif)

Here's a [Code Sandbox Demo](https://codesandbox.io/s/flexible-component-sjgft?file=/src/App.js).

As you can see, If the `showOnTop` value is `true` then we're showing the navigation first and then content and If the `showOnTop` value is `false` then we're showing the content first and then navigation.

So returning an array from a component helps to get this flexibility.

### Thanks for reading!

Check out my recently published [Mastering Redux](https://master-redux.yogeshchavan.dev/) course.

In this course, you will build 3 apps along with food ordering app and you'll learn:

* Basic and advanced Redux
* How to manage the complex state of array and objects
* How to use multiple reducers to manage complex redux state
* How to debug Redux application
* How to use Redux in React using react-redux library to make your app reactive.
* How to use redux-thunk library to handle async API calls and much more

and then finally we'll build a complete [food ordering app](https://www.youtube.com/watch?v=2zaPDfCKAvM) from scratch with stripe integration for accepting payments and deploy it to the production.

[<img src="https://gist.github.com/myogeshchavan97/98ae4f4ead57fde8d47fcf7641220b72/raw/c3e4265df4396d639a7938a83bffd570130483b1/banner.jpg">](https://bit.ly/3w0DGum)

**Want to stay up to date with regular content regarding JavaScript, React, Node.js? [Follow me on LinkedIn](https://www.linkedin.com/in/yogesh-chavan97/).**

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