Tried Something New & it worked

I was building the navigation bar for this site and saw a bunch of the same tags in my component. So I was thinking, can I create a piece of data that stores my hrefs and titles and then create a function to dynamically enter/create each nav item. It took a bit but yes.

const pages = [
  { path: "/", title: "Home" },
  { path: "/about", title: "About" },
  { path: "/posts", title: "Blog" },
  { path: "/contact", title: "Contact" },
];

export default function Nav() {
  return (
    <nav>
      {pages.map((page, index) => (
        <Link key={index} href={page.path}>
          <a style={{ marginRight: `.5rem` }}>{page.title}</a>
        </Link>
      ))}
    </nav>
  );
}

I created an array of objects with the path and title for each page that I wanted to be in the naviagtion bar. Once the data was stored in an array, I mapped through the array in my Nav component creating each link.

Was this easier? I'm not 100% sure. I can see how adding/removing nav items will be easy without having to copy and page alot of code. Just cool to think of something new and implement it without having to google too much 😂