React components as content for TabComponent

[Fabian]

Hi,

the content property of TabItemDirective allows only a string (html code or element id).  Is there any way to add a React Component, wheter via TabItemDirective or the method addTab?

Thanks in advance and regards,

Fabian

[Balaji M]

Hi Fabian 

 

Our Tab component allows to add the other React components as the content to the tab items.  First we need to declare a template within the function returns jsx element. Assign the function as value for the content property. Please find the reference below. 

export class Default extends SampleBase { 

    render() { 

        // Mapping Tab items Header property 

       let headertext = [{ text: "Tab1"}, { text: "Tab2"}, { text: "Tab3"}]; 

    

    // render the other components as the separate functions like below 

    function contentTemplate1(){ 

    return(<ButtonComponent>Click me</ButtonComponent>); 

  } 

  function contentTemplate2(){ 

    return(<DatePickerComponent></DatePickerComponent>); 

  } 

  function contentTemplate3() { 

    return( <CalendarComponent ></CalendarComponent>); 

  } 

 

        return (<div className='control-pane'> 

          <TabComponent heightAdjustMode='Auto' id='defaultTab'> 

            <TabItemsDirective> 

                                               //refer that functions as content 

              <TabItemDirective header={headertext[0]} content={contentTemplate1}/> 

                 

              <TabItemDirective header={headertext[1]} content={contentTemplate2}/> 

                 

              <TabItemDirective header={headertext[2]} content={contentTemplate3}/> 

            </TabItemsDirective> 

          </TabComponent> 

 

      </div>); 

    } 

 

Sample: https://stackblitz.com/edit/react-9wgktr-sl9hpw?file=index.js 

Let us know if you have any queries. 

Regards, 

M. Balaji 

[Fabian]

Hi,

thank you, that did it.  I was not aware TabItemDirective could work with a function for the content property.

Please note that when a Tab is removed, the react component added via a function as content for TabItemDirective is not unmounted.  I think this is a bug.

Thanks and regards,

Fabian

[Balaji M]

Hi Fabian 

We have validated the your reported scenario of react component added via a function as content for TabItemDirective is not unmounted. Actually as per our Tab source, when the tab item is removed (using removeTab method) or closed(using showclosebutton property)the following Tab item is detached from the DOM not destroyed from DOM. Hence in this scenario the destroy event will not called. Based on the your reported case, this destroy event(unmount event) is not feasible in this cases. Hence if the you want to destroy the components on removing the tab item we suggest you to follow the below solution. 

  // bind the destroy event for the component in the content 

function contentTemplate3() { 

      return (<ToolbarComponent ref={(toolbar) => { this.toolbarObj = toolbar }} id="toolbar" destroyed={this.ondestroy} > 

        <ItemsDirective> 

          . 

        </ItemsDirective> 

      </ToolbarComponent>); 

    } 

 

    return (<div className='control-pane'> 

      <button className="e-control e-btn" onClick={this.buttonClick.bind(this)} id="targetButton" role="button">Click to remove tab</button> 

                                                            //use the Removing Event for Tab 

      <TabComponent ref={(tab) => { this.tabObj = tab }} heightAdjustMode='Auto' id='defaultTab' showCloseButton={true} removing={this.tabOnremove.bind(this)} > 

        <TabItemsDirective> 

          <TabItemDirective header={headertext[0]} content={contentTemplate1} /> 

 

          <TabItemDirective header={headertext[1]} content={contentTemplate2} /> 

 

          <TabItemDirective header={headertext[2]} content={contentTemplate3.bind(this)} /> 

        </TabItemsDirective> 

      </TabComponent> 

 

tabOnremove(e) { 

       // based on the selected index destroy the control in the item manually using the destroy method – this will raise the destroy method 

    if (e.removedIndex === 2) { 

      this.toolbarObj.destroy(); 

    } 

  } 

 

ondestroy() { 

 

    alert("destroyed") 

 

  } 

 

 

Demo sample: https://stackblitz.com/edit/react-9wgktr-ngewf3?file=index.js 

Regards, 

M. Balaji 

[Fabian]

Hi,

Thank your for your support.  Your solution will work only if the removed component is from EJ2.  What if the component is not from EJ2?

I am not React expert, actually learning currently.  But maybe it would be better to call ReactDOM.unmountComponentAtNode(contentElement) which will call componentWillUnmount of the content component.  By checking EJ2 source code, componentWillUnmount calls the destroy method.

Would this the right way to do it?

Thanks and regards,

Fabian

[Balaji M]

Hi Fabian 

 

We have checked your solution of unmounting our EJ2 components using ReactDOM.unmountComponentAtNode(contentElement) method and it successfully called the componentWillUnmount() method.  Please find the modified sample from below 

 

https://stackblitz.com/edit/react-9wgktr-np133r?file=index.js 

Let us know if you have any queries. 

Regards, 

M. Balaji