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

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

Return a number From A Component

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

Return an Array From A Component

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:

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

Here's a Code Sandbox Demo.

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 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 from scratch with stripe integration for accepting payments and deploy it to the production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

Things You Might Not Know About React Components

Comments (1)

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)

Return a string From A Component

Return a number From A Component

Return an Array From A Component

Thanks for reading!

Command Palette

Comments (1)

More from this blog

Return a string From A Component

Return a number From A Component

Return an Array From A Component

Thanks for reading!