jQuery UI Widgets Forums React Dynamic tabs content

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 4 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Dynamic tabs content #112169


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


    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


    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}>
            <div>Content 1</div>
            <div>Content 2</div>
    export default MainLayout;
    Dynamic tabs content #112178


    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:

    Best Regards,
    Hristo Hristov

    jQWidgets team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.