tabs doesnt refresh when elements changes

[Albert]

I have a tab control with few pages and it is showing the values that are set in state variables, whenever I change values by setstate, I expect that the values in the tabs get updated but unfortunately it doesnt happen.

I even set  enablePersistence="true" but had no effect.

if I put input field in the form, by clicking the buttons, it will be refreshed but not the one in tab control.

your advices would be appreciated.

here is the code:

// --------------------------------------------------------------------------------------

export default class FormDataBinding extends Component {

  constructor() {

    super(...arguments);

    this.state = { name: "name", family: "family" };

    this.headertext = [

      { text: "Twitter", iconCss: "e-twitter" },

    ];

  }

  // --------------------------------------------------------------------------------------

  tabContent1 = () => {

    return (

      <React.Fragment>

        {console.log("--->tabContent1: Name=", this.state.name)}

        <p>thes controls are inside Tab Component</p>

        <div>

          {/* it's not working because it's inside tabComponent */}

          <input

            type="text"

            value={this.state.name}

            key="nameKey1"

            id="nameId1"

            style={{ width: "500px" }}

          ></input>

          <br />

          <input

            type="text"

            value={this.state.family}

            key="familyID1"

            id="familyKey1"

            style={{ width: "500px" }}

          ></input>

          <button onClick={this.btnClick.bind(this)}>click hear</button>

        </div>

      </React.Fragment>

    );

  };

  // --------------------------------------------------------------------------------------

  btnClick = () => {

    var newName = "name :" + new Date().toTimeString();

    var familyName = "family : " + new Date().toTimeString();

    this.setState({ name: newName });

    this.setState({ family: familyName });

    this.UpdateStateInstantly(newName);

    this.ShowTabs();

  };

  // --------------------------------------------------------------------------------------

  ShowTabs = () => {

    return (

      <TabComponent

        enablePersistence="true"

        heightAdjustMode="Auto"

        id="defaultTab"

      >

        <TabItemsDirective>

          {console.log("ShowTabs1")}

          {/* ------------< Tab1 >------------- */}

          <TabItemDirective

            presentation={true}

            header={this.headertext[0]}

            

            content={this.tabContent1}

          />

          {console.log("ShowTabs2")}

        </TabItemsDirective>

      </TabComponent>

    );

  };

  // --------------------------------------------------------------------------------------

  render() {

    return (

      <div className="control-pane">

        <div className="control-section tab-control-section">

          {/*-------------------*/}

          <button onClick={this.btnClick.bind(this)}>click here</button>

          <br />

          {/* //-----------------------------------< Tabs >--------------------- */}

          {this.ShowTabs()}

          {/* //--------------------------------------------------------------- */}

        </div>

      </div>

    );

  }

}

[Arun Palaniyandi]

Hi Albert, 

Greetings from Syncfusion.  

We have achieved your requirement using the custom data in template in the content property. We have passed template and data to Tab content for retrieving setState changes. This issue reason is because the setstate is not immediately mutate inside the Tab content template.  Kindly refer to the following code.  

  

tabContent1 = (data, data1) => { 

    return ( 

      <React.Fragment> 

        <p>thes controls are inside Tab Component</p> 

        <div> 

          {/* it's not working because it's inside  tabComponent */} 

          <input 

            type="text" 

            value={data.text} 

            key="nameKey1" 

            id="nameId1" 

            style={{ width: "500px" }} 

          /> 

          <br /> 

          <input 

            type="text" 

            value={data1.textval} 

            key="familyID1" 

            id="familyKey1" 

            style={{ width: "500px" }} 

          /> 

 

          <button onClick={this.btnClick.bind(this)}>click hear</button> 

        </div> 

      </React.Fragment> 

    ); 

  }; 

  // -------------------------------------------------------------------------------------- 

  btnClick = () => { 

    debugger; 

    var newName = "name :" + new Date().toTimeString(); 

    var familyName = "family : " + new Date().toTimeString(); 

 

    this.setState({ name: newName }); 

    this.setState({ family: familyName }); 

    //this.UpdateStateInstantly(newName); 

    // this.ShowTabs(); // no need to call this method again 

 

  }; 

  // -------------------------------------------------------------------------------------- 

  ShowTabs = () => { 

    return ( 

      <TabComponent 

        ref={tab => (this.tab = tab)} 

        enablePersistence="true" 

        heightAdjustMode="Auto" 

        id="defaultTab" 

      > 

        <TabItemsDirective> 

          {console.log("ShowTabs1")} 

          {/* ------------< Tab1 >------------- */} 

          <TabItemDirective 

            presentation={true} 

            header={this.headertext[0]} 

            content={{ 

              template: this.tabContent1, 

              data: { text: this.state.name, textval: this.state.family } 

            }} 

          /> 

          {console.log("ShowTabs2")} 

        </TabItemsDirective> 

      </TabComponent> 

    ); 

  }; 

  

  

We have attached the below sample for your reference. 

 

Sample: https://codesandbox.io/s/flamboyant-cartwright-o8isb 

 

Please let us know if you need further assistance. 

Regards, 

Arun P. 

 

[Albert]

Thanks for your Answer,

You solved my problem.

Can you please let me know where we can find these details about the components as I couldnt find them in your Documents and also API Docs.

https://ej2.syncfusion.com/react/documentation/api/tab

Thanks

[Karthigeyan Krishnamurthi]

Hi Albert,

 

We are happy that our solution resolved your issue.

 

We have not documented our previous solution case and have the below UG. We will check and document it as soon as possible.

https://ej2.syncfusion.com/react/documentation/tab/how-to/render-other-components-in-tab-using-template/

 

Regards,

Karthi

[Nick Lechnowskyj]

When using the latest version of Syncfusion controls and React this example no longer works, it causes the component to render [Object object] on the screen. Here is an updated example showing it. How can I fix it?

https://codesandbox.io/s/new-cookies-u88nx?file=/src/index.tsx

[Satheesh Kumar Balasubramanian]

Hi Nick, 

  

Thanks for your update. 

  

We have validated your reported query "When using the latest version of Syncfusion controls and React this sample no longer works, it causes the component to render [Object Object]" and could replicate the issue at our end. We have done some improvements in template rendering, which is the cause for this reported issue. We have confirmed this as defect at our end and logged the bug report which can be tracked from the following link. 

https://www.syncfusion.com/feedback/26000/tab-component-content-renders-object-object-when-element-changes 

  

The issue fix for this defect will be included in our weekly patch release which is expected to be rolled out by June 29, 2021. We would appreciate your valuable patience until then. 

  

Regards, 

Satheesh Kumar B 

[Nick Lechnowskyj]

Thank you for looking into it so quickly 

[Nevitha Ravi]

Hi Nick, 

You are most welcome..! Please keep track the status of the issue through the shared feedback link and let us know if you need any further assistance.  

Regards, 

Nevitha 

[Nevitha Ravi]

Hi Nick, 

We are glad to announce that our Essential Studio 2021 Volume 2 release v19.2.0.44  is rolled out successfully and is available for download under the following link. In this release, the reported issue ‘content not rendering properly when element changes dynamically’ has been resolved. 

https://www.syncfusion.com/forums/166800/essential-studio-2021-volume-2-main-release-v19-2-0-44-is-available-for-download 

 

Release notes: https://ej2.syncfusion.com/react/documentation/release-notes/19.2.44/?type=all#tab 

Feedback: https://www.syncfusion.com/feedback/26000/tab-component-content-renders-object-object-when-element-changes 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Regards, 

Nevitha 

10