Syncfusion AI Assistant

How can I help you?

React hooks tab in React Tab component

13 Apr 20264 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.

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