How To Refactor Navigation Links Using map() in React

Introduction

In React applications, it's common to have navigation menus with links to different pages.

Initially, these links might be hardcoded individually, which can be cumbersome and less maintainable as the number of links grows.

In this article, we'll explore how to refactor hardcoded navigation links using the map() function in JavaScript.

By leveraging the power of map(), we can simplify our code and make it more scalable and reusable.

Prerequisites

Before we proceed, make sure you have a basic understanding of React and JavaScript.

Refactoring the Navigation Links

Let's start by refactoring the hardcoded navigation links in the LandingPage.

Here is the old way I did it

 const LandingPage = () => {

     return(
        <Nav >
          <LinkItems href="/">Home</LinkItems>
          <LinkItems href="/products">Products</LinkItems>
          <LinkItems href="/documentation">Documentation</LinkItems>
          <LinkItems href="/pricing">Pricing</LinkItems>
      </Nav>

//Rest of the code...
)}

First, I stored the paths in a file called routes.tsx, like so:

export const Routes = { 
home: "/", 
products: "/products",
documentation: "/documentation", 
pricing: "/pricing",
 };

Then import the Routes to LandingPage and pass it in the href key in navLinks:

import { Routes } from "@config/routes";
import styled from "styled-components";

//styled-component for anchor tag
const LinkItems = styled.a`
  display: flex;
  text-decoration: none;
  //...
`;

const navLinks = [
  { id: 1, label: "Home", href: Routes.home },
  { id: 2, label: "Products", href: Routes.products },
  { id: 3, label: "Documentation", href: Routes.documentation },
  { id: 4, label: "Pricing", href: Routes.pricing },
];

const LandingPage = () => {

     return( 
        <Nav>
          {navLinks?.map((link) => (
            <LinkItems key={link.id} href={link.href}>
              {link.label}
            </LinkItems>
          ))}
        </Nav>
//...
)}
export default LandingPage;

In the code above, we create an array called navLinks that contains objects representing each navigation link.

Each object has properties like id, label, and href, which correspond to the unique identifier, display label, and URL of the link, respectively.

Inside the LandingPage, we use the map() function on the navLinks array to iterate over each link object.

For each iteration, we render a LinkItems component with the key set to the id and the href set to the href property of the link object. The label property is used as the content of the link.

Explanation:

By refactoring the navigation links using map(), we achieve several benefits.

First, it simplifies the code by reducing duplication. Instead of repeating similar code for each link, we can define the links in a single array and iterate over it.

This makes the code more readable and easier to maintain.

Second, it enhances scalability and reusability.

Adding or modifying links becomes as simple as adding or modifying objects in the navLinks array.

The navigation menu can easily accommodate new links without requiring changes to the rendering logic.

This makes it convenient to scale the navigation menu as your application evolves.

Additionally, separating the links into a separate configuration file (Routes in this case) allows for better organization and separation of concerns.

It centralizes the management of routes, making it easier to update URLs or handle dynamic routing scenarios.

Conclusion

In this article, we explored how to refactor hardcoded navigation links using the map() function in React.

By storing the links in an array of objects, we simplified the code, improved scalability, and made it easier to maintain and update the navigation menu. Leveraging the power of map(), we achieved a more reusable and flexible solution.

Remember to apply this refactoring technique whenever you encounter repetitive code for navigation links or similar scenarios in your React applications.

Hope this helps!