CODEWITHSUNDEEP
reactjsnext.js
Barty
Barty

Reputation: 567

Nextjs/React Changing the selected tab

I am trying to change the current tab by detecting when the user clicks on it, and then updating the currentTab by setting its current bool to true, and the old one to false.

Currently the tabs show fine, and the items for that tab shows fine. The issue is getting the tab to change.

My tabs are in an array and look like:

{ name: "Tab1", category: 2, href: "#", current: false },
{ name: "Tab2", category: 5, href: "#", current: true },

my tabs section in the code:

      <select
        id="tabs"
        name="tabs"
        className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
        defaultValue={currentTab?.name ?? "default"}
        onClick={handleTabChange}
      >
        {props.tabs?.map((tab) => (
          <option key={tab.name}>{tab.name}</option>
        ))}
      </select>

my code for handling when a tab is clicked ( this does not work)

  const [tabChanged, setTabChanged] = useState(false);
  let currentTab = props.tabs?.find((tab) => tab?.current === true);

  function handleTabChange() {
    // change the current status to false for old tab
    // change the current status to true for new tab
    currentTab = props.tabs?.find((tab) => tab?.current === true);
    setTabChanged(tabChanged);
    // this does not work
    console.log("working: " + tabChanged);
  }

further down I am displaying different items depending on the active tab. This part works, but it won't update when a tab is clicked since the tab part is not working:

      {props.items
        .filter((item) => item.category === currentTab?.category)
        .map((item) => (

If possible I would rather do something like:

 const [currentTab, setTabChanged] = useState(
    props.tabs?.find((tab) => tab?.current === true)
  );

  function handleTabChange(tab: Tab) {
    setTabChanged(tab);
    // update jsx
    console.log("current: " + tab.name);
  }

then in my select area I would have:

 // [onclick error] Type 'void' is not assignable to type 'MouseEventHandler<HTMLSelectElement> | undefined'. 

// [tab error] Argument of type 'Tab | undefined' is not assignable to parameter of type 'Tab'.
  Type 'undefined' is not assignable to type 'Tab'

 // not working
 onClick={handleTabChange(currentTab)}

The tab interface is:

export interface Tab {
  name: string;
  category: number;
  href: string;
  current: boolean;
}

Upvotes: 0

Views: 2563

Answers (1)

Arslan Shahab
Arslan Shahab

Reputation: 649

I think you are going for a complicated approach. You can use the following approach to handle this. Also, your approach is not scalable, like, what if there were 7 - 10 tabs? Would you handle 7 true false states and change each of them every time? No, right?

So we can do something like this:

  const [activeTab, setActiveTab] = useState<Tab>(props.tabs?.[0]);

  function handleTabChange(event: any) {
    if(event.target.value === "default") return; 
    
    const updatedTab = props.tabs?.find(tab => tab.name === event.target.value)
    setActiveTab(updatedTab)
  }

You will also need to modify your select items as follows:

      <select
        id="tabs"
        name="tabs"
        className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
        defaultValue={activeTab?.name ?? "default"}
        value={activeTab?.name} // add value here
        onClick={handleTabChange}
      >
        {props.tabs?.map((tab) => (
          // add value to the options
          <option value={tab.name} key={tab.name}>{tab.name}</option>
        ))}
      </select>

On a side note, this will give you error: onClick={handleTabChange(currentTab)} because you are invoking the function in right away and it would cause infinite loop. You should to: onClick={() => handleTabChange(currentTab)} // pass it as a reference

Upvotes: 1

Related Questions