How to use React Hooks with Tab in React Tab

4 Sep 20264 minutes to read

You can prevent the React JSX component reload issue on state changes by rendering the React JSX component as a child of the React Tab component. In the following example, the re-rendering of a TextBox component on React Tab state changes is prevented by passing its element as a React Tab item child.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useState } from 'react';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { TabComponent } from '@syncfusion/ej2-react-navigations';
const App = () => {
    const [name, setName] = useState('');
    return (<div>
      <div className="control_wrapper" id="control_wrapper">
        <TabComponent>
          <div className="e-tab-header">
            <div> TextBox </div>
          </div>
          <div className="e-content">
            <div>
              <TextBoxComponent placeholder="Enter Name" value={name} input={(e) => setName(e.value)}></TextBoxComponent>
              <div>My name is {name}</div>
            </div>
          </div>
        </TabComponent>
      </div>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

index.tsx

import { useState } from 'react';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { TabComponent } from '@syncfusion/ej2-react-navigations';


const App = () => {
  const [name, setName] = useState('');
  return (
    <div>
      <div className="control_wrapper" id="control_wrapper">
        <TabComponent>
          <div className="e-tab-header">
            <div> TextBox </div>
          </div>
          <div className="e-content">
            <div>
              <TextBoxComponent placeholder="Enter Name" value={name} input={(e) => setName(e.value)} ></TextBoxComponent>
              <div>My name is {name}</div>
            </div>
          </div>
        </TabComponent>
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);