React hooks accordion in React Accordion 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 Accordion component. In the below example, we have prevented the re-rending of textbox component on state changes in Accordion 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 { AccordionComponent } from '@syncfusion/ej2-react-navigations';
const App = () => {
    const [name, setName] = useState('');
    return (<div>
      <div className="control_wrapper" id="control_wrapper">
        <AccordionComponent>
          <div>
            <div>
              <div> TextBox </div>
            </div>
            <div>
              <div>
                <TextBoxComponent placeholder="Enter Name" value={name} input={(e) => setName(e.value)}></TextBoxComponent>
                <div>My name is {name}</div>
              </div>
            </div>
          </div>
        </AccordionComponent>
      </div>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
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 { AccordionComponent } from '@syncfusion/ej2-react-navigations';


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