Syncfusion tab control's value doesn't refresh when value of elements changes

Question

I have a syncfusion 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 doesn't happen.

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

if I put input field in the form, by clicking the test button, it will be refreshed by the new values 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>

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

          {/* ------------< Tab1 >------------- */}
          <TabItemDirective
            presentation={true}
            header={this.headertext[0]}

            content={this.tabContent1}
          />


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

Answer 1

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