React hooks tab in React Tab component

24 Feb 20234 minutes to read

You can prevent the React JSX component reload issue on state changes by rendering the React JSX component as children of Tab component. In the below example, we have prevented the re-rending of textbox component on state changes in Tab component.

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