create tabs using array map

[Richard Craig]

I'm using the html method of creating tabs (due to using Recoil)

Problem is, it's not rendering the tabs from the divs in the array map.

Any ideas or alternative solutions? Thanks

<TabComponent id='defaultTab'>

    <div className="e-tab-header">

        <div>Blank</div>

        {optionsData.map((option,i)=> {

            return (

            <div>Option: {option.option_id}</div>

            )

        })}

    </div>

    <div className="e-content">

        <div>nothing to see</div>

        {optionsData.map((option,i)=> {

            return (

            <div><optionPane optionID={option.option_id}/></div>

            )

        })}

    </div>

</TabComponent>

[Satheesh Kumar Balasubramanian]

Hi Richard, 

  

Greetings from Syncfusion Support..! 

  

We have validated your reported issue at our end. But, we were unable to replicate the issue as each div rendered as a tab item at our end. Please refer the sample in the following link. 

  

Sample: https://stackblitz.com/edit/react-tabs-arraymap?file=index.js 

UG: https://ej2.syncfusion.com/react/documentation/tab/getting-started/#initialize-the-tab-using-html-elements 

  

Kindly try the above sample, if the issue persist still share the following details to check the issue further. 

• Try to replicate the issue in the above sample
• Share all the tab related code snippets
• Share issue replicating sample if possible
  

Regards, 

Satheesh Kumar B 

[Richard Craig]

Thanks for the reply, I guess I might have a css issue.

I'll take it apart and try again. I was just confused why the one hard-coded tab does render ok.

Thanks

Richard

[Nevitha Ravi]

Hi Richard, 

Thanks for your update. 

Can you please share your entire tab related code snippets and css used for tabs or issue replicating sample to help you out? 

Regards, 

Nevitha 

[Richard Craig]

Thanks for the reply

Hopefully this example will show the problem.

https://stackblitz.com/edit/react-tcu3iv

I either need to refresh the tabs after the new divs have been added, or move away from the html render method and use addTab

[Nevitha Ravi]

Hi Richard, 

Thanks for your update. 

You can add the tab items dynamically with the help of addTab public method which is the recommended way to add the tab items dynamically. 

Please get back to us if you need any assistance. 

Regards, 

Nevitha