Mapping data from SidebarData.js

Sidebar.jsx

import React from "react";
import "./Sidebar.css";
import { SidebarData } from "./SidebarData";
const Sidebar = () => {
  return (
    <div className="Sidebar">
      <ul className="SidebarList">
        {SidebarData.map((val, key) => {
          return (
            <li
              key={key}
              id={window.location.pathname == val.link ? "active" : ""}
              className="listRow"
              onClick={() => {
                window.location.pathname = val.link;
              }}
            >
              <div id="icon">{val.icon}</div>
              <div id="title">{val.title}</div>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export { Sidebar };

SidebarData.js

import { GoHome, GoHeart, GoHistory, GoClock, GoPlay } from "react-icons/go";

export const SidebarData = [
  {
    title: "Home",
    icon: <GoHome />,
    link: "/",
  },
  {
    title: "Like",
    icon: <GoHeart />,
    link: "/likes",
  },
  {
    title: "Playlist",
    icon: <GoPlay />,
    link: "/playlist",
  },
  {
    title: "Watch Later",
    icon: <GoClock />,
    link: "/watchlater",
  },
  {
    title: "History",
    icon: <GoHistory />,
    link: "/history",
  },
];