1. Home
  2. Forum
  3. React - EJ 2
  4. tabs doesnt refresh when elements changes

tabs doesnt refresh when elements changes

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>
    );
  }
}




8 Replies
AP Arun Palaniyandi Syncfusion Team August 1, 2019 11:25 AM UTC

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. 
 
 
Please let us know if you need further assistance. 

Regards, 
Arun P. 
 


AL Albert August 9, 2019 06:53 PM UTC

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.


Thanks

KK Karthigeyan Krishnamurthi Syncfusion Team August 12, 2019 06:13 AM UTC

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


NL Nick Lechnowskyj June 6, 2021 06:47 PM UTC

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?


SK Satheesh Kumar Balasubramanian Syncfusion Team June 7, 2021 12:06 PM UTC

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. 

  
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 



NL Nick Lechnowskyj June 7, 2021 05:19 PM UTC

Thank you for looking into it so quickly 

NR Nevitha Ravi Syncfusion Team June 8, 2021 05:16 AM UTC

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 


NR Nevitha Ravi Syncfusion Team June 30, 2021 12:55 PM UTC

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. 
 
 
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

Loader.
Up arrow icon