How to Reset the Active Tab

[yordis]

Hey folks, we currently display some tabs, as follow:

function RatingTabs(props: { rating: Rating }) {
  return (
    <div className="w-full bg-black rounded-sm border-2 border-black-lighter">
      <Tab.Group defaultIndex={getDefaultIndex(props.rating)}>
        <Tab.List className="flex bg-black-pure">
          <RiskyRatingTab />
          <GoodRatingTab />
          <GreatRatingTab />
        </Tab.List>
        <Tab.Panels className="mt-2">
          <RiskyRatingPanel rating={props.rating} />
          <GoodRatingPanel rating={props.rating} />
          <GreatRatingPanel rating={props.rating} />
        </Tab.Panels>
      </Tab.Group>
    </div>
  );
}

Which as of today, we had to do some workaround the active tab,

function App() {
  const query = useQuery('....')
  return (
    <div>
      {query.isLoading ? (
         <RatingTabs key="loading" rating={query.data?.rating} />
       ) : (
         <RatingTabs key="active" rating={query.data?.rating} />
      )}
     <div>
  )
}

Notice that we render twice the component with different key values. That is because once the data from the backend is finished loading, we want to force the tab to focus on the correct tab (which we are abusing the defaultIdex in combination with the re-rendering for it) until the user decides to click again in another tab.

Any idea how we could be solved it differently?

[yordis]

Duplicate of #742