No content after refresh #475

Activity

1. danez commented on Apr 27, 2022

   

   danez

   on Apr 27, 2022

   Collaborator

   More actions

   Can you please share an example? If I look at the code of the TabPanel this should not be possible.
2. danez

   added

   need feedback

   on Apr 27, 2022
3. KMika-Sages commented on May 4, 2022

   

   KMika-Sages

   on May 4, 2022

   Last edited by KMika-Sages

   Author

   More actions

   `

   const FinanceTabPanel = (props: any) => {
   const { edges, financeCategories } = props
   const FINANCE_CATEGORIES: string[] = financeCategories
   
   const [tab, setTab] = useQueryParam("tab", withDefault(StringParam, FINANCE_CATEGORIES[0]))
   const selectedTabIndex = edges.map(panel => panel.node.financeTabId).indexOf(tab)
   
   const handleTabChange = (newTabIndex: number) => {
       if (newTabIndex !== selectedTabIndex) {
           setTab(FINANCE_CATEGORIES[newTabIndex])
       }
   }
   
   return (
       <section className="finance-section">
           <div className="tab-panel_wrapper">
               <Tabs selectedIndex={selectedTabIndex} onSelect={handleTabChange}>
                   <TabList>
                       {edges.map((tab: FinancePropsProperties, idx: number) => (
                           <Tab key={idx}>{tab.node.financeTabName}</Tab>
                       ))}
                   </TabList>
   
                   {edges.map((tab: FinancePropsProperties, index: number) => (
                       <TabPanel key={index}>
                           <FinanceTarget props={edges[index]} />
                           {tab.node?.trainingITTopics ? (
                               <OpenTrainingsTopics props={edges[index]} />
                           ) : (
                               <React.Fragment />
                           )}
                           {tab.node?.financeApplicationTitle ? (
                               <FinanceApplication props={edges[index]} />
                           ) : (
                               <React.Fragment />
                           )}
                           {tab.node?.recruitment ? <Recruitment props={edges[index]} /> : <React.Fragment />}
                           {tab.node?.financeDownloadableFiles ? (
                               <DownloadFiles props={edges[index]} />
                           ) : (
                               <React.Fragment />
                           )}
                           {tab.node?.informationReference ? (
                               <InformationReference props={edges[index]} />
                           ) : (
                               <React.Fragment />
                           )}
                       </TabPanel>
                   ))}
               </Tabs>
           </div>
       </section>
   )
   

   }
   `
4. KMika-Sages commented on May 6, 2022

   

   KMika-Sages

   on May 6, 2022

   Author

   More actions

   Can you please share an example? If I look at the code of the TabPanel this should not be possible.

   And if you want live example then go https://www.sages.pl/blog
   Choose tab different than first and refresh page
5. xSyki commented on Sep 5, 2022

   

   xSyki

   on Sep 5, 2022

   More actions

   @danez I had the same problem. Updating to a new version of react-tabs and react helped. I think you can close this issue.
6. joaobarbosaap commented on Sep 8, 2022

   

   joaobarbosaap

   on Sep 8, 2022

   More actions

   Looks like your problem is related with your application state, when I refresh your website after your example I can see a blank screen, but if you check the UI, you will notice that the first tab is selected, and your URL is requesting the data for another tab, so you need to sync your tab with your current URL in order to fix it.
7. Uzayry42 commented on Jan 2, 2025

   

   Uzayry42

   on Jan 2, 2025

   More actions

   Looks like your problem is related with your application state, when I refresh your website after your example I can see a blank screen, but if you check the UI, you will notice that the first tab is selected, and your URL is requesting the data for another tab, so you need to sync your tab with your current URL in order to fix it.

   how do i do that