React hooks tab in React Tabs component

25 Jan 2023 / 1 minute 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.

Source

Preview

App.jsx

index.jsx

index.html

index.css

App.tsx

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('container'));
import { useState } from 'react';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { TabComponent } from '@syncfusion/ej2-react-navigations';
function 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 />);

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Functional Component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container' style="margin: 20px auto 0; width:450px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('container'));


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


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