javascript - Open a specific tab by matching the browser URL and Tab URL

Question

I have a react component which has a Tab Component in it. This is the component:

import React from 'react';
import { RTabs, I18nText } from '@wtag/react-comp-lib';
import Profiles from './Profiles';
import Search from './Search';
import Booking from './Booking';

const pathName = window.location.href.split('/').reverse()[0];

const features = [
  {
    tabNum: 0,
    title: (
      <I18nText
        id="features.platform.profiles"
        className="platform-features__profiles-tab"
      />
    ),
    content: <Profiles />,
    url: '/en-US/p/features/applications/profiles',
  },
  {
    tabNum: 1,
    title: (
      <I18nText
        id="features.platform.search"
        className="platform-features__search-tab"
      />
    ),
    content: <Search />,
    url: '/en-US/p/features/applications/search',
  },
  {
    tabNum: 2,
    title: (
      <I18nText
        id="features.platform.booking"
        className="platform-features__booking-tab"
      />
    ),
    content: <Booking />,
    url: '/en-US/p/features/applications/booking',
  },
];

const getItems = () => {
  return features.map(({ tabNum, title, content, url }, index) => ({
    tabNum,
    key: index,
    title,
    content,
    url,
  }));
};

const PlatformFeatures = () => {
  return (
    <div className="platform-features__tabs">
      <RTabs isVertical={true} items={getItems()} selectedTabKey={2} />
    </div>
  );
};

export default PlatformFeatures;

When the component is loaded in the browser the first tab is selected and opened by default. While clicking on the respective tabs, the tab opens. The selected tab index number can be passed to selectedTabKey props of the RTabs component and that particular tab will be selected and opened. As seen here index 2 is passed so the 3rd tab i.e: Booking will be selected and opened by default. Now I want to achieve a functionality that the selected tab will be determined by matching the current URL it is in. Like if the URL has booking in it, the Booking tab will be opened while the browser loads the component. It will work like if I give the URL with booking in it to someone and if he pastes that URL in the browser the booking tab will be selected and opened not the default first tab. I think if I can write a function which can determine the browser URL and match it with the urls in the features array and if url matches, it will take the matched tab index from the array and pass it to the selectedTabKey props, then it might open the selected tab dynamically depending on the location of the browser url.selectedTabKey props will always take number as a PropType. I need suggestions and code examples to implement these functionalities.

Answer 1

const browserURL = document.location.pathname;
const filteredURL = features.map(({ url }) => url);

  const checkURL = (arr, val) => {
    return arr.filter(function(arrVal) {
      return val === arrVal;
    })[0];
  };

  const matchedURL = checkURL(filteredURL, browserURL);
  const getSelectedTabKey = filteredURL.indexOf(matchedURL);

and then pass the getSelectedTabKey to selectedTabKey props