jQuery UI Widgets Forums React Dynamic tabs content

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

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

    syarifsyabana
    Participant

    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;
    
    Dynamic tabs content #112178

    Hristo
    Participant

    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

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

You must be logged in to reply to this topic.