Syncfusion : Tab Component with TabItemsDirective shows nothing

Question

I am actually trying to use the TabComponent from Syncfusion to have a nice Tab in my app, so I tried to use it as shown on their website but nothing was shown.

My code :

import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';

const Tab = (props) => {
    return (
        <div>
            This is written in Tab.js, Tab Component should be here
            <TabComponent id='defaultTab' style={{width: '100%', borderColor:'red'}} overflowMode='Scrollable'>
                <TabItemsDirective>
                    <TabItemDirective header={"Header1"} content={"Content1"} />
                    <TabItemDirective header={"Header2"} content={"Content2"} />
                    <TabItemDirective header={"Header3"} content={"Content3"} />
                </TabItemsDirective>
            </TabComponent>
        </div>
    
    )
}
export default Tab;

But this doesn't work, "This is written in Tab.js, Tab Component should be here" is correctly shown in the render, but the TabComponent acts like its does not exist at all.

But when I create the TabComponent like this :

<TabComponent id='other Tab' style={{width: '100%', borderColor:'red'}} overflowMode='Scrollable'>
     <div className='e-tab-header'>
          <div>Header1</div>
          <div>Header2</div>
     </div>
     <div className='e-content'>
          <div>Content1</div>
          <div>Content2</div>
     </div>
</TabComponent>

Like this, it works nicely, unfortunately I would prefer to use the first method since it would clearly be better for me and the way I plan to use it, so can anyone explain why the TabItemDirective doesn't work here ?

Answer 1

We have checked the shared code snippets and let you know that you have to render the tab header and content as highlighted in the below code snippets to resolve the rendering issue.

https://stackblitz.com/edit/react-tab-header-content-render-issue?file=index.html,index.js https://ej2.syncfusion.com/react/demos/#/material/tab/default https://ej2.syncfusion.com/react/documentation/tab/getting-started#initialize-the-tab-using-json-items-collection

[index.js]

const Default = () => {
  let headertext;
  // Mapping Tab items Header property
  headertext = [{ text: 'Header1' }, { text: 'Header2' }, { text: 'Header3' }];
  const tabContent1 = () => {
    return <div>Content1</div>;
  };
  const tabContent2 = () => {
    return <div>Content2</div>;
  };
  const tabContent3 = () => {
    return <div>Content3</div>;
  };
  return (
    <div className="control-pane">
      <div className="control-section tab-control-section">
        {/* Render the Tab Component */}
        <TabComponent overflowMode="Scrollable" id="defaultTab">
          <TabItemsDirective>
            <TabItemDirective header={headertext[0]} content={tabContent1} />
            <TabItemDirective header={headertext[1]} content={tabContent2} />
            <TabItemDirective header={headertext[2]} content={tabContent3} />
          </TabItemsDirective>
        </TabComponent>
      </div>
    </div>
  );
};
export default Default;