Dynamic tabs content

[syarifsyabanaParticipant]

Hi,
I am trying to create dynamic content using addLast in jqxTabs. But what is generated is [object Object]. Can anyone help me.

import.tsx

import React from 'react'

/* COMPONENTS */
import Company from '../../pages/company'
import Brand from '../../pages/brand'
import OtherComponent from '../../pages/otherComponent'

export function getCompoent(key: any) {
  /* MASTER */
  if (key === '1001') {
    return <Company />
  }
  if (key === '1002') {
    return <Brand />
  }
  if (key === '1003') {
    return <OtherComponent />
  }
  return false
}

index.tsx

import React from 'react';
import JqxTabs from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
import { getCompoent } from './imports'

class MainLayout extends React.PureComponent<{}, any> {
  private myTabs = React.createRef<JqxTabs>();

  public componentDidMount(): void {
    this.myTabs.current!.addLast('Title', getCompoent('1002'));
  }

  public render() {
    return (
      <JqxTabs ref={this.myTabs} width={300}>
        <ul>
          <li>Tab1</li>
          <li>Tab2</li>
        </ul>
        <div>Content 1</div>
        <div>Content 2</div>
      </JqxTabs>
    );
  }
}
export default MainLayout;

[HristoParticipant]

Hello syarifsyabana,

For the initialization of the widgets inside the jqxTabs it will be better to use the initTabContent callback.
There you could try to render the desired component.
Also, I would like to suggest you look at this topic which could be useful, too:
https://www.jqwidgets.com/community/topic/possible-to-move-content-into-two-separate-files/

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts