Create tabs dynamically

[jpcmf]

Hello. I'm trying to use your component, but I didn't figure out how to create tabs dynamically.

My scenario is: I'm trying to create a newOptions obj inside an useEffect and then I use an useState to save this newOptions obj. When I try to pass the state inside the useDynTabs hook, the tabs don't apear.

What I'm doing wrong here? Any tips?

Thank you :)

[jpcmf]

If someone need some help, I'm not using useEffect anymore and just handle with some useStates. I will share the solution below and close this thread (it's not an issue).

Thank you :)

 let _instance: any;

  const newOptions = newTabsOptionsFromCategories(categories);

  const [TabList, PanelList, ready] = useDynTabs({
    ...newOptions,
    onLoad: function () {
      const getAllArticles = async () => {
        try {
          const response = await fetchQuery('articles');

          setArticles(response);

          setSelectedArticlesByCategory([]);

          setLoading(false);
        } catch (error) {
          console.log(error);
        }
      };

      getAllArticles();
    },
    onChange: ({ currentData }) => {
      setLoading(true);

      setArticles([]);

      const getTabData = _instance.getTab(currentData.selectedTabID);

      if (getTabData.title === 'Todos') {
        const getAllArticles = async () => {
          try {
            const response = await fetchQuery('articles');

            setArticles(response);

            setSelectedArticlesByCategory([]);

            setLoading(false);
          } catch (error) {
            console.log(error);
          }
        };

        getAllArticles();

        return null;
      }

      const getLatestArticlesByCategory = async () => {
        try {
          const response = await fetchQuery(
            'categories',
            `?populate=*&filters%5Bslug%5D=${getTabData.title}`
          );

          setSelectedArticlesByCategory(response);

          setLoading(false);
        } catch (error) {
          console.log(error);
        }
      };

      getLatestArticlesByCategory();
    },
    onDestroy: () => {
      setArticles([]);
      setSelectedArticlesByCategory([]);
    },
  });

  ready((instance: any) => {
    _instance = instance;
  });

[dev-javascript]

Loading tabs and updating options inside the useEffect :

function Panel1() {
  return <p>panel 1</p>;
}
function Panel2() {
  return <p>panel 2</p>;
}
function App() {
  let _instance;
  const [TabList, PanelList, ready] = useDynTabs();
  ready((instance) => {
    _instance = instance;
  });
  useEffect(() => {
    _instance.setOption('onChange', () => {
      console.log('onChange');
    });
    _instance.open({id: '1', title: 'Tab 1', panelComponent: Panel1});
    _instance.open({id: '2', title: 'Tab 2', panelComponent: Panel2});
    _instance.select('1');
  }, []);
  return (
    <>
      <TabList></TabList>
      <PanelList></PanelList>
    </>
  );
}

[jpcmf]

@dev-javascript Thank you 👍🏻 💯